@bundle-stats/ui 4.8.4 → 4.9.0

package/src/ui/button/button.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
+
+import css from './button.module.css';
+
+const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+const KIND = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DANGE: 'danger',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCES: 'success',
+} as const;
+
+type Size = (typeof SIZE)[keyof typeof SIZE];
+type Kind = (typeof KIND)[keyof typeof KIND];
+
+interface ButtonProps {
+  outline?: boolean;
+  solid?: boolean;
+  kind?: Kind | 'default';
+  size?: Size;
+  radius?: Size | 'circle' | 'none';
+  padding?: Size | 'none';
+}
+
+export const Button = (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>) => {
+  const {
+    className = '',
+    outline = false,
+    solid = false,
+    kind = 'default',
+    size = 'medium',
+    radius = '',
+    padding = '',
+    ...restProps
+  } = props;
+
+  // Set padding and radius when provided or when outline/solid variations are set
+  const resolvedPadding = padding || ((outline || solid) && size);
+  const resolvedRadius = radius || ((outline || solid) && size);
+
+  const rootClassName = cx(
+    css.root,
+    css[size],
+    kind && css[kind],
+
+    outline && css.outline,
+    outline && css[`outline--${kind}`],
+
+    solid && css.solid,
+    solid && css[`solid--${kind}`],
+
+    resolvedPadding && css[`padding--${resolvedPadding}`],
+    resolvedRadius && css[`radius--${resolvedRadius}`],
+
+    css[size],
+    className,
+  );
+
+  return <ButtonBaseComponent {...restProps} className={rootClassName} />;
+};
+
+Button.SIZE = SIZE;
+Button.KIND = KIND;

package/src/ui/button/index.ts

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

package/src/ui/dropdown/dropdown.module.css

@@ -11,12 +11,11 @@
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
 
+  appearance: none;
   background: none;
   font-size: var(--size-small);
   line-height: var(--space-small);
   white-space: nowrap;
-  appearance: none;
-  cursor: pointer;
   color: var(--color-text-light);
 }
 
@@ -48,7 +47,6 @@
 .item {
   display: block;
   appearance: none;
-  cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;

package/src/ui/empty-set/empty-set.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
+import { Stack } from '../../layout/stack';
+import { Button } from '../button';
 import css from './empty-set.module.css';
 
 export const EmptySet = (props) => {
@@ -12,16 +13,16 @@ export const EmptySet = (props) => {
   const actions = [
     ...(handleResetFilters
       ? [
-          <button className={css.action} type="button" onClick={handleResetFilters}>
+          <Button kind="primary" type="button" onClick={handleResetFilters} className={css.action}>
             {I18N.RESET_FILTERS}
-          </button>,
+          </Button>,
         ]
       : []),
     ...(handleViewAll
       ? [
-          <button className={css.action} type="button" onClick={handleViewAll}>
+          <Button kind="primary" type="button" onClick={handleViewAll} className={css.action}>
             {I18N.VIEW_ALL}
-          </button>,
+          </Button>,
         ]
       : []),
   ];

package/src/ui/empty-set/empty-set.module.css

@@ -1,20 +1,3 @@
 .root {
   color: var(--color-text-light);
 }
-
-.action {
-  appearance: none;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--color-primary);
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.action:focus,
-.action:active,
-.action:hover {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

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

@@ -1,2 +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

@@ -10,13 +10,11 @@
 }
 
 .filterCheckbox {
-  cursor: pointer;
 }
 
 .filterInput {
   flex: 0 0 auto;
   height: 1em;
-  cursor: pointer;
 }
 
 .filterLabel {
@@ -28,29 +26,13 @@
 }
 
 .filterOnlyButton {
-  padding: 0 var(--space-xxxsmall);
   display: none;
-  appearance: none;
-  border: none;
-  border-radius: var(--radius-small);
-  cursor: pointer;
   position: absolute;
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  transition: var(--transition-in);
-  background: var(--color-info);
-  color: var(--color-background);
+  padding: var(--space-xxxsmall);
   font-size: var(--size-xsmall);
-  line-height: var(--line-height-header);
-}
-
-.filterOnlyButton:hover,
-.filterOnlyButton:active,
-.filterOnlyButton:focus {
-  transition: var(--transition-out);
-  background: var(--color-info-dark);
-  color: var(--color-background);
 }
 
 /** cover item text */
@@ -116,6 +98,19 @@
   text-transform: lowercase;
 }
 
+.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);
+}
+
 .filterGroupItems {
   max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   overflow: auto;
@@ -129,23 +124,6 @@
   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;

package/src/ui/filters/filters.tsx

@@ -1,9 +1,12 @@
-import React, { useCallback } from 'react';
+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 { Dropdown } 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';
@@ -47,9 +50,16 @@ const Filter = (props: FilterProps) => {
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button type="button" onClick={getOnOnlyClick(name)} className={css.filterOnlyButton}>
-          only
-        </button>
+        <Button
+          kind="info"
+          solid
+          size="small"
+          type="button"
+          onClick={getOnOnlyClick(name)}
+          className={css.filterOnlyButton}
+        >
+          {I18N.ONLY}
+        </Button>
       )}
     </Component>
   );
@@ -75,6 +85,8 @@ const FilterGroup = (props: FilterGroupProps) => {
     toggleFilters,
   } = props;
 
+  const [search, setSearch] = useState('');
+
   const { label: groupLabel, children: groupItems } = data;
 
   const areAllGroupItemsChecked = groupItems
@@ -108,6 +120,14 @@ const FilterGroup = (props: FilterGroupProps) => {
       });
     };
 
+  const filteredGroupItems = useMemo(() => {
+    if (!search) {
+      return groupItems;
+    }
+
+    return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
+  }, [search, groupItems]);
+
   return (
     <Dropdown
       className={className}
@@ -118,8 +138,34 @@ const FilterGroup = (props: FilterGroupProps) => {
       {({ MenuItem, menuItemClassName }) => {
         return (
           <>
+            {groupItems.length > 10 && (
+              <div className={css.filterGroupSearchWrapper}>
+                <InputSearch
+                  defaultValue={search}
+                  onChange={setSearch}
+                  placeholder={I18N.GROUP_SEARCH}
+                  debounceWait={0}
+                />
+              </div>
+            )}
             <div className={css.filterGroupItems}>
-              {groupItems.map(({ key: itemKey, ...itemData }) => {
+              {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 });
 
@@ -138,29 +184,31 @@ const FilterGroup = (props: FilterGroupProps) => {
                 );
               })}
             </div>
-            <div className={css.filterGroupActions}>
-              {areAllGroupItemsChecked ? (
-                <MenuItem
-                  id="clear-all"
-                  as="button"
-                  className={menuItemClassName}
-                  type="button"
-                  onClick={getOnGroupCheck(false)}
-                >
-                  {I18N.CLEAR}
-                </MenuItem>
-              ) : (
-                <MenuItem
-                  id="clear-all"
-                  as="button"
-                  className={menuItemClassName}
-                  type="button"
-                  onClick={getOnGroupCheck(true)}
-                >
-                  {I18N.CHECK}
-                </MenuItem>
-              )}
-            </div>
+            {filteredGroupItems.length !== 0 && (
+              <div className={css.filterGroupActions}>
+                {areAllGroupItemsChecked ? (
+                  <MenuItem
+                    id="clear-all"
+                    as="button"
+                    className={menuItemClassName}
+                    type="button"
+                    onClick={getOnGroupCheck(false)}
+                  >
+                    {I18N.CLEAR}
+                  </MenuItem>
+                ) : (
+                  <MenuItem
+                    id="clear-all"
+                    as="button"
+                    className={menuItemClassName}
+                    type="button"
+                    onClick={getOnGroupCheck(true)}
+                  >
+                    {I18N.CHECK}
+                  </MenuItem>
+                )}
+              </div>
+            )}
           </>
         );
       }}

package/src/ui/index.js

@@ -1,4 +1,5 @@
 export { Alert } from './alert';
+export { Button } from './button';
 export { Container } from './container';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
@@ -8,6 +9,7 @@ export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
+export { InputSearch } from './input-search';
 export { Loader } from './loader';
 export { Skeleton } from './skeleton';
 export { Table } from './table';

package/src/ui/input/input.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Input } from '.';
+
+export default {
+  title: 'UI/Input',
+  component: Input,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => <Input placeholder="Search" />;
+export const WithSize = () => <Input placeholder="Search" size="small" />;

package/src/ui/input/input.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './input.module.css';
+
+interface InputProps {
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const Input = (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => {
+  const { className = '', size = 'medium', ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, css[size]);
+
+  return <input className={rootClassName} {...restProps} />;
+};

package/src/ui/input-search/index.ts

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

package/src/{components/metrics-table-search/metrics-table-search.module.css → ui/input-search/input-search.module.css}

@@ -9,33 +9,16 @@
 }
 
 .cancelButton {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  border-radius: 50%;
   position: absolute;
-  right: 2px;
+  right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
-  transition: var(--transition-in);
 }
 
 .cancelButton:focus,
 .cancelButton:hover,
 .cancelButton:active {
   color: var(--color-text-light);
-  transition: var(--transition-out);
-}
-
-.cancelButtonIcon {
-  display: block;
-  width: var(--space-small);
-  height: var(--space-small);
 }

package/src/ui/input-search/input-search.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Input } from '../input';
+
+import css from './input-search.module.css';
+
+interface InputSearchProps {
+  placeholder?: string;
+  defaultValue?: string;
+  onChange?: (newValue: string) => void;
+  debounceWait?: number;
+}
+
+export const InputSearch = (
+  props: InputSearchProps & Omit<React.ComponentProps<'div'>, 'onChange'>,
+) => {
+  const {
+    className = '',
+    placeholder = 'Search',
+    defaultValue = '',
+    onChange = noop,
+    debounceWait = 500,
+  } = props;
+  const rootClassname = cx(css.root, className);
+
+  const [value, setValue] = useState(defaultValue);
+
+  // Update local state when default value changes
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const debouncedUpdateSearch = useCallback(debounce(onChange, debounceWait), [onChange]);
+
+  const changeValue = useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        debouncedUpdateSearch(newValue);
+        setValue(newValue);
+      }
+    },
+    [setValue, value],
+  );
+
+  const inputOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      changeValue(event.target.value);
+    },
+    [changeValue],
+  );
+
+  const clearButtonOnClick = useCallback(() => {
+    changeValue('');
+  }, [changeValue]);
+
+  return (
+    <div className={rootClassname}>
+      <Input
+        className={css.input}
+        placeholder={placeholder}
+        onChange={inputOnChange}
+        value={value}
+        size="small"
+        autoComplete="off"
+      />
+      {value && (
+        <Button
+          radius="circle"
+          padding="small"
+          type="button"
+          onClick={clearButtonOnClick}
+          aria-label="Clear search"
+          className={css.cancelButton}
+        >
+          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
+        </Button>
+      )}
+    </div>
+  );
+};

package/types/components/index.d.ts

@@ -14,7 +14,6 @@ export { LighthouseTable } from "./lighthouse-table";
 export { Metric } from "./metric";
 export { MetricsTable } from "./metrics-table";
 export { MetricsTableOptions } from "./metrics-table-options";
-export { MetricsTableSearch } from "./metrics-table-search";
 export { MetricsTableTitle } from "./metrics-table-title";
 export { ModuleInfo } from "./module-info";
 export { Summary } from "./summary";

package/types/ui/button/button.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+declare const KIND: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly DANGE: "danger";
+    readonly WARNING: "warning";
+    readonly INFO: "info";
+    readonly SUCCES: "success";
+};
+type Size = (typeof SIZE)[keyof typeof SIZE];
+type Kind = (typeof KIND)[keyof typeof KIND];
+interface ButtonProps {
+    outline?: boolean;
+    solid?: boolean;
+    kind?: Kind | 'default';
+    size?: Size;
+    radius?: Size | 'circle' | 'none';
+    padding?: Size | 'none';
+}
+export declare const Button: {
+    (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>): React.JSX.Element;
+    SIZE: {
+        readonly SMALL: "small";
+        readonly MEDIUM: "medium";
+        readonly LARGE: "large";
+    };
+    KIND: {
+        readonly PRIMARY: "primary";
+        readonly SECONDARY: "secondary";
+        readonly DANGE: "danger";
+        readonly WARNING: "warning";
+        readonly INFO: "info";
+        readonly SUCCES: "success";
+    };
+};
+export {};

package/types/ui/button/index.d.ts

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

package/types/ui/filters/filters.i18n.d.ts

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

package/types/ui/index.d.ts

@@ -1,4 +1,5 @@
 export { Alert } from "./alert";
+export { Button } from "./button";
 export { Container } from "./container";
 export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";
@@ -8,6 +9,7 @@ export { HorizontalBarChart } from "./horizontal-bar-chart";
 export { HoverCard } from "./hover-card";
 export { Icon } from "./icon";
 export { Input } from "./input";
+export { InputSearch } from "./input-search";
 export { Loader } from "./loader";
 export { Skeleton } from "./skeleton";
 export { Table } from "./table";

package/types/ui/input/index.d.ts

@@ -1 +1 @@
-export * from "./input";
+export * from './input';

package/types/ui/input/input.d.ts

@@ -1,19 +1,6 @@
-export function Input({ className, size, ...restProps }: {
-    [x: string]: any;
-    className: any;
-    size: any;
-}): React.JSX.Element;
-export namespace Input {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let size: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let size_1: string;
-        export { size_1 as size };
-    }
-}
 import React from 'react';
-import PropTypes from 'prop-types';
+interface InputProps {
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const Input: (props: InputProps & Omit<React.ComponentProps<'input'>, 'size'>) => React.JSX.Element;
+export {};

package/types/ui/input-search/index.d.ts

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