@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/src/ui/filters/__tests__/filters.utils.ts

@@ -0,0 +1,98 @@
+import { getGroupFiltersLabelSuffix, getInitialValues } from '../filters.utils';
+
+describe('UI / Filters / utils', () => {
+  describe('getGroupFiltersLabelSuffix', () => {
+    test('should return none', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: false },
+        { key: 'JS', label: 'JS', defaultValue: false },
+        { key: 'IMG', label: 'IMG', defaultValue: false },
+        { key: 'MEDIA', label: 'Media', defaultValue: false },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('none');
+    });
+
+    test('should return all', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Media', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: true },
+        { key: 'HTML', label: 'HTML', defaultValue: true },
+        { key: 'OTHER', label: 'Other', defaultValue: true },
+      ]);
+
+      expect(suffix).toEqual('all');
+    });
+    test('should return checked filters', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: false },
+        { key: 'MEDIA', label: 'Media', defaultValue: false },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS');
+    });
+
+    test('should crop last filter if need it', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Meeeeeeedia', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: false },
+        { key: 'HTML', label: 'HTML', defaultValue: false },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS, IMG, Mee...');
+    });
+
+    test('should crop and add remaining filters count', () => {
+      const suffix = getGroupFiltersLabelSuffix([
+        { key: 'CSS', label: 'CSS', defaultValue: true },
+        { key: 'JS', label: 'JS', defaultValue: true },
+        { key: 'IMG', label: 'IMG', defaultValue: true },
+        { key: 'MEDIA', label: 'Media', defaultValue: true },
+        { key: 'FONTS', label: 'Fonts', defaultValue: true },
+        { key: 'HTML', label: 'HTML', defaultValue: true },
+        { key: 'OTHER', label: 'Other', defaultValue: false },
+      ]);
+
+      expect(suffix).toEqual('CSS, JS, IMG, Media +2');
+    });
+  });
+
+  describe('getInitialValues', () => {
+    test('should return initial values', () => {
+      const initialValues = getInitialValues('', {
+        changed: {
+          label: 'Changed',
+          defaultValue: false,
+        },
+        fileType: {
+          label: 'File type',
+          children: [
+            { key: 'CSS', label: 'CSS', defaultValue: false },
+            { key: 'JS', label: 'JS', defaultValue: true },
+          ],
+        },
+      });
+
+      expect(initialValues).toEqual({
+        changed: false,
+        'fileType.CSS': false,
+        'fileType.JS': true,
+      });
+    });
+  });
+});

package/src/ui/filters/filters.i18n.ts

@@ -0,0 +1,6 @@
+export const GROUP_NOT_FOUND = 'No filters found';
+export const GROUP_SEARCH = 'Search by filter name';
+export const GROUP_SEARCH_CLEAR = 'Clear search';
+export const CLEAR = 'Clear all';
+export const CHECK = 'Check all';
+export const ONLY = 'only';

package/src/ui/filters/filters.module.css

@@ -1,22 +1,21 @@
-/* Checkbox + label + button */
-.filter {
-  /* Update MenuItem padding */
-  padding-top: calc(var(--space-xxxsmall) / 2);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
 
+/* Filter (label with input + text) */
+.filter {
   position: relative;
   width: 100%;
   max-width: 240px;
+  color: var(--color-text);
 }
 
-.filterCheckbox {
-  cursor: pointer;
-}
-
-.filterInput {
+.filterControl {
+  margin: 0;
   flex: 0 0 auto;
   height: 1em;
-  cursor: pointer;
 }
 
 .filterLabel {
@@ -27,75 +26,92 @@
   text-overflow: ellipsis;
 }
 
-.filterOnlyButton {
-  padding: var(--space-xxxsmall);
-  display: none;
-  appearance: none;
-  border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  font-size: var(--size-small);
-  line-height: var(--space-xsmall);
+.filterControl[disabled] + .filterLabel {
+  color: var(--color-text-light);
 }
 
-/** filter disabled state */
-.filterInput[disabled] + .filterLabel {
-  color: var(--color-text-light);
+.filter:hover {
+  color: var(--color-dark);
 }
 
-.filterInput[disabled] + .filterOnlyButton {
-  display: none;
+/** Filter single */
+.filterSingle {
+  padding: calc(var(--space-xxsmall) - 1px);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
 }
 
-/** filter hover state */
-.filter {
-  color: var(--color-text);
+.filterSingle:hover,
+.filterSingle:active,
+.filterSingle:focus {
+  border-color: var(--color-outline-dark);
+  transition: var(--transition-in);
 }
 
-.filter:hover {
-  color: var(--color-dark);
+/** Filter group */
+.filterGroupItems {
+  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
+  overflow: auto;
 }
 
-.filter:hover .filterOnlyButton {
-  display: block;
+.filterGroupItem {
+  position: relative;
 }
 
-/** Filter standard variation */
-.filterStandalone {
-  padding: 0;
-  width: auto;
-  color: var(--color-text-light);
-  z-index: var(--layout-xlow); /* show collapsed border */
-  font-size: var(--size-small);
-  line-height: var(--space-small);
+.filterGroupItemFilter {
+  padding-right: 24px; /* space for only button */
 }
 
-.filterStandalone .filterCheckbox {
-  padding: calc(var(--space-xxsmall) - 1px) calc(var(--space-xxsmall) - 1px);
-  border: 1px solid var(--color-outline);
+.filterGroupOnlyButton {
+  display: none;
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
+  font-size: var(--size-xsmall);
+  line-height: 1.1;
 }
 
-.filterStandalone:hover .filterCheckbox,
-.filterStandalone:active .filterCheckbox,
-.filterStandalone:focus .filterCheckbox {
-  z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
+/** cover item text */
+.filterGroupOnlyButton::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 100%;
+  bottom: 0;
+  width: var(--space-small);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
+}
+
+/** filter hover state */
+.filterGroupItem:hover .filterGroupOnlyButton {
+  display: block;
 }
 
 /** Filter group variation */
-.labelSuffixCustom {
+.filterGroupLabelSuffixCustom {
   color: var(--color-text);
   text-transform: lowercase;
 }
 
-.filterGroupItems {
-  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
-  overflow: auto;
+.filterGroupSearchWrapper {
+  padding-bottom: var(--space-xxxsmall);
+  margin-bottom: var(--space-xxxsmall);
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.filterGroupSearchNotFound {
+  padding: var(--space-xxsmall) 0;
+  text-align: center;
+  font-size: var(--size-small);
+  color: var(--color-text-light);
 }
 
 .filterGroupActions {
@@ -105,29 +121,3 @@
   margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
-
-/* clear / check all */
-.filterGroupButton {
-  margin-top: calc(0px - var(--space-xxxsmall));
-  margin-bottom: calc(0px - var(--space-xxxsmall));
-  margin-right: calc(0px - var(--space-xxxsmall));
-  padding: var(--space-xxxsmall) 0;
-  outline: none;
-  appearance: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--color-primary);
-  font-size: var(--size-small);
-  line-height: 1;
-}
-
-.item {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.itemButton {
-  border-radius: var(--radius-small);
-}

package/src/ui/filters/filters.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { action } from 'storybook/actions'; // eslint-disable-line
+
+import { getWrapperDecorator } from '../../stories';
+import { Filters } from '.';
+
+export default {
+  title: 'UI/Filters',
+  component: Filters,
+  decorators: [getWrapperDecorator({ paddingLeft: '200px' })],
+} as Meta;
+
+export const Default = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+          {
+            key: 'OTHER',
+            label: 'Asset that is not CSS, JS or HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);
+
+export const Overflow = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      chunks: {
+        label: 'Chunks',
+        children: Array(22)
+          .fill('')
+          .map((_, currentIndex) => ({
+            key: `chunk-${currentIndex}`,
+            label: `Chunk ${currentIndex + 1}`,
+            defaultValue: true,
+          })),
+      },
+    }}
+  />
+);
+
+export const DisableOptions = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: false,
+        disabled: true,
+      },
+      entrypoint: {
+        label: 'Entrypoint',
+        defaultValue: false,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+            disabled: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);

package/src/ui/filters/filters.tsx

@@ -0,0 +1,234 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import cx from 'classnames';
+
+import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { Button } from '../button';
+import { ControlGroup } from '../control-group';
+import { Dropdown, DropdownItem } from '../dropdown';
+import { InputSearch } from '../input-search';
+import * as I18N from './filters.i18n';
+import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
+import css from './filters.module.css';
+
+interface FilterBooleanProps extends React.ComponentProps<'input'> {
+  label: string;
+}
+
+const Filter = (props: FilterBooleanProps) => {
+  const { className = '', label, name, ...inputProps } = props;
+
+  return (
+    <FlexStack
+      space="xxxsmall"
+      alignItems="center"
+      as="label"
+      className={cx(css.filter, className)}
+    >
+      <input
+        type="checkbox"
+        id={`filter-${name}`}
+        name={name}
+        {...inputProps}
+        className={css.filterControl}
+      />
+      <span title={label} className={css.filterLabel}>
+        {label}
+      </span>
+    </FlexStack>
+  );
+};
+
+interface FilterGroupProps extends React.ComponentProps<'div'> {
+  groupKey: string;
+  data: FilterGroupFieldData;
+  values: Record<string, boolean>;
+  onCheckboxChange: FilterBooleanProps['onChange'];
+  toggleFilters: (newFilters: Record<string, boolean>) => void;
+}
+
+const FilterGroup = (props: FilterGroupProps) => {
+  const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
+  const { label: groupLabel, children: groupItems } = data;
+
+  const [search, setSearch] = useState('');
+
+  const areAllGroupItemsChecked = groupItems
+    .map(({ key: itemKey }) => values?.[`${groupKey}.${itemKey}`])
+    .reduce((agg, val) => agg && val, true);
+
+  const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
+  const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
+  const dropdownLabel = (
+    <>
+      {`${groupLabel}:`}
+      &nbsp;
+      <span className={cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom)}>
+        {filterSuffix}
+      </span>
+    </>
+  );
+
+  const getOnGroupCheck =
+    (value: boolean, overrides = {}) =>
+    () => {
+      const newFilters = groupItems.reduce(
+        (agg, { key: itemKey }) => ({
+          ...agg,
+          [`${groupKey}.${itemKey}`]: value,
+        }),
+        {},
+      );
+
+      toggleFilters({
+        ...newFilters,
+        ...overrides,
+      });
+    };
+
+  const filteredGroupItems = useMemo(() => {
+    if (!search) {
+      return groupItems;
+    }
+
+    return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
+  }, [search, groupItems]);
+
+  return (
+    <Dropdown
+      className={className}
+      label={dropdownLabel}
+      ariaLabel={`${groupLabel}: ${filterSuffix}`}
+    >
+      {groupItems.length > 10 && (
+        <div className={css.filterGroupSearchWrapper}>
+          <InputSearch
+            defaultValue={search}
+            onChange={setSearch}
+            placeholder={I18N.GROUP_SEARCH}
+            debounceWait={0}
+          />
+        </div>
+      )}
+      <div className={css.filterGroupItems}>
+        {filteredGroupItems.length === 0 && (
+          <Stack className={css.filterGroupSearchNotFound}>
+            <p>{I18N.GROUP_NOT_FOUND}</p>
+            <div>
+              <Button
+                size="small"
+                kind="primary"
+                type="button"
+                onClick={() => setSearch('')}
+                className={css.filterGroupSearchNotFoundClear}
+              >
+                {I18N.GROUP_SEARCH_CLEAR}
+              </Button>
+            </div>
+          </Stack>
+        )}
+        {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
+          const id = [groupKey, itemKey].join('.');
+          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+
+          return (
+            <DropdownItem key={id} className={css.filterGroupItem}>
+              <Filter
+                label={itemData.label}
+                name={id}
+                onChange={onCheckboxChange}
+                checked={values[id]}
+                disabled={itemData.disabled}
+                className={css.filterGroupItemFilter}
+              />
+              <Button
+                kind="info"
+                solid
+                size="small"
+                type="button"
+                onClick={getOnOnlyClick()}
+                disabled={itemData.disabled}
+                className={css.filterGroupOnlyButton}
+              >
+                {I18N.ONLY}
+              </Button>
+            </DropdownItem>
+          );
+        })}
+      </div>
+      {filteredGroupItems.length !== 0 && (
+        <div className={css.filterGroupActions}>
+          {areAllGroupItemsChecked ? (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
+              {I18N.CLEAR}
+            </DropdownItem>
+          ) : (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(true)} role="button">
+              {I18N.CHECK}
+            </DropdownItem>
+          )}
+        </div>
+      )}
+    </Dropdown>
+  );
+};
+
+interface FiltersProps extends React.ComponentProps<'div'> {
+  values: Record<string, boolean>;
+  filters: FilterFieldsData;
+  toggleFilter: (name: string, value: boolean) => void;
+  toggleFilters: FilterGroupProps['toggleFilters'];
+}
+
+export const Filters = (props: FiltersProps) => {
+  const { className = '', values, filters, toggleFilter, toggleFilters } = props;
+
+  /**
+   * Toggle filter value on checkbox change
+   */
+  const onCheckboxChange = useCallback(
+    (event: any) => {
+      const { name } = event.target;
+      toggleFilter(name, !values[name]);
+    },
+    [toggleFilter, values],
+  );
+
+  const filterList = Object.entries(filters);
+  const filterCount = filterList.length;
+
+  return (
+    <ControlGroup className={cx(css.root, className)}>
+      {filterList.map(([name, data], index) => {
+        const lastItem = index === filterCount - 1;
+
+        if ('defaultValue' in data) {
+          return (
+            <Filter
+              name={name}
+              label={data.label}
+              onChange={onCheckboxChange}
+              checked={values[name]}
+              disabled={data.disabled as boolean}
+              key={name}
+              className={cx(css.filterSingle, lastItem && css.itemLast)}
+            />
+          );
+        }
+
+        return (
+          <FilterGroup
+            groupKey={name}
+            data={data}
+            values={values}
+            onCheckboxChange={onCheckboxChange}
+            toggleFilters={toggleFilters}
+            className={cx(lastItem && css.itemLast)}
+            key={name}
+          />
+        );
+      })}
+    </ControlGroup>
+  );
+};