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

package/src/ui/filters/{filters.utils.js → filters.utils.ts}

@@ -1,3 +1,5 @@
+import type { FilterFieldData, FilterFieldsData, FilterGroupFieldData } from '../../types';
+
 const FILTER_SUFFIX_MAX_LENGTH = 18;
 const ELLIPSES = '...';
 const JOIN = ', ';
@@ -7,14 +9,9 @@ export const LABELS = {
   ALL: 'all',
 };
 
-/**
- * @param {Array<Array>} filters
- * @return {String}
- */
-export const getGroupFiltersLabelSuffix = (filters) => {
+export const getGroupFiltersLabelSuffix = (filters: FilterGroupFieldData['children']): string => {
   const filterCount = filters.length;
-  // eslint-disable-next-line no-unused-vars
-  const checkedFilters = filters.filter(([_, { defaultValue }]) => defaultValue);
+  const checkedFilters = filters.filter(({ defaultValue }) => defaultValue);
   const filterCheckedCount = checkedFilters.length;
 
   if (filterCheckedCount === 0) {
@@ -26,7 +23,7 @@ export const getGroupFiltersLabelSuffix = (filters) => {
   }
 
   // eslint-disable-next-line no-unused-vars
-  const checkedFilterLabels = checkedFilters.map(([_, { label }]) => label);
+  const checkedFilterLabels = checkedFilters.map(({ label }) => label);
 
   let suffix = '';
   let inlinedLabelCount = 0;
@@ -65,23 +62,43 @@ export const getGroupFiltersLabelSuffix = (filters) => {
   return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
 };
 
-export const getInitialValues = (key, filters) => {
-  if (typeof filters?.defaultValue !== 'undefined') {
+export const getInitialValues = (
+  key: string,
+  filtersData: FilterFieldsData | FilterFieldData | FilterGroupFieldData | string,
+): Record<string, boolean> => {
+  if (typeof filtersData !== 'object') {
+    return {};
+  }
+
+  if ('defaultValue' in filtersData) {
     return {
-      [key]: filters.defaultValue,
+      [key]: (filtersData as FilterFieldData).defaultValue,
     };
   }
 
-  if (typeof filters === 'object') {
-    return Object.entries(filters).map(([groupKey, groupFilters]) => getInitialValues(
-      [...key ? [key] : [], groupKey].join('.'),
-      groupFilters,
-    )).reduce((agg, current) => ({
-      ...agg,
-      ...current,
-    }), {});
+  if ('children' in filtersData) {
+    const result = {} as Record<string, boolean>;
+
+    (filtersData as FilterGroupFieldData).children.forEach(({ key: childKey, defaultValue }) => {
+      const fullKey = [...(key ? [key] : []), childKey].join('.');
+      result[fullKey] = defaultValue;
+    });
+
+    return result;
   }
 
-  return {};
-};
+  let result = {};
 
+  Object.entries(filtersData).forEach(([groupKey, groupFilters]) => {
+    if (typeof groupFilters === 'object') {
+      const fullKey = [...(key ? [key] : []), groupKey].join('.');
+      const groupInitialValues = getInitialValues(fullKey, groupFilters as any);
+      result = {
+        ...result,
+        ...groupInitialValues,
+      };
+    }
+  });
+
+  return result;
+};

package/src/ui/filters/{index.jsx → index.tsx}

@@ -1,12 +1,21 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import merge from 'lodash/merge';
 
+import { FilterFieldsData } from '../../types';
 import { getInitialValues } from './filters.utils';
 import { Filters as BaseComponent } from './filters';
 
-export const Filters = (props) => {
+interface FiltersProps
+  extends Omit<
+    React.ComponentProps<typeof BaseComponent>,
+    'onChange' | 'filters' | 'values' | 'toggleFilter' | 'toggleFilters'
+  > {
+  onChange?: (newValues: Record<string, boolean>) => void;
+  filters: FilterFieldsData;
+}
+
+export const Filters = (props: FiltersProps) => {
   const { onChange, filters, ...restProps } = props;
   const [values, setValues] = useState(getInitialValues('', filters));
 
@@ -26,7 +35,7 @@ export const Filters = (props) => {
   );
 
   const toggleFilter = useCallback(
-    (key, value) => {
+    (key: string, value: boolean) => {
       const nextValues = merge({}, values, { [key]: value });
       setValues(nextValues);
 
@@ -34,11 +43,11 @@ export const Filters = (props) => {
         onChange(nextValues);
       }
     },
-    [onChange, setValues, values]
+    [onChange, setValues, values],
   );
 
   const toggleFilters = useCallback(
-    (newFilters) => {
+    (newFilters: Record<string, boolean>) => {
       const nextValues = merge({}, values, newFilters);
       setValues(nextValues);
 
@@ -59,15 +68,3 @@ export const Filters = (props) => {
     />
   );
 };
-
-Filters.defaultProps = {
-  onChange: null,
-};
-
-Filters.propTypes = {
-  /** Filter config */
-  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-
-  /** OnChange handler */
-  onChange: PropTypes.func,
-};

package/src/ui/hover-card/hover-card.module.css

@@ -17,7 +17,8 @@
 }
 
 .hoverCard {
-  padding: var(--space-xsmall) var(--space-small);
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;

package/src/ui/hover-card/hover-card.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { HoverCard, HoverCardProps } from '.';
+
+export default {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+} as Meta;
+
+const Template: Story<HoverCardProps> = (props) => (
+  <>
+    <HoverCard {...props} />
+    <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
+      vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
+      eget risus
+    </p>
+  </>
+);
+
+export const Default = () => (
+  <Template label="main.js">
+    <h1>main.js</h1>
+    <p>info</p>
+  </Template>
+);
+
+export const WithRenderFn = () => (
+  <Template label="main.js">
+    {({ close }) => (
+      <div>
+        <h1>main.js</h1>
+        <p>info</p>
+        <button type="button" onClick={close}>
+          close
+        </button>
+      </div>
+    )}
+  </Template>
+);

package/src/ui/hover-card/{hover-card.jsx → hover-card.tsx}

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Hovercard,
@@ -11,10 +10,28 @@ import {
 
 import css from './hover-card.module.css';
 
-export const HoverCard = (props) => {
-  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+export interface HoverCardProps {
+  className?: string;
+  anchorClassName?: string;
+  hoverCardClassName?: string;
+  href?: string;
+  as?: React.ElementType;
+  label: React.ReactNode;
+  children?: React.ReactNode | (({ close }: { close: () => void }) => React.ReactNode);
+}
 
-  const state = useHovercardState({ gutter: 8, timeout: 700 });
+export const HoverCard = (props: HoverCardProps) => {
+  const {
+    className = '',
+    anchorClassName = '',
+    hoverCardClassName = '',
+    href = '',
+    as = null,
+    label,
+    children,
+  } = props;
+
+  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -37,6 +54,7 @@ export const HoverCard = (props) => {
         href={href}
         className={cx(css.anchor, anchorClassName)}
         as={Component}
+        aria-controls={state.open ? hovercardProps.id : ''}
       >
         {label}
       </HovercardAnchor>
@@ -44,7 +62,6 @@ export const HoverCard = (props) => {
         {...hovercardProps}
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
-        style={{ zIndex: 10000 }}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}
@@ -52,29 +69,3 @@ export const HoverCard = (props) => {
     </div>
   );
 };
-
-HoverCard.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-  /** Adopted child class name for hover card */
-  hoverCardClassName: PropTypes.string,
-  /** Adopted child class name for anchor */
-  anchorClassName: PropTypes.string,
-  /** Anchor label */
-  label: PropTypes.node,
-  /** Anchor href */
-  href: PropTypes.string,
-  /** Anchor component */
-  as: PropTypes.elementType,
-  /** Hover card component */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-};
-
-HoverCard.defaultProps = {
-  className: '',
-  hoverCardClassName: '',
-  anchorClassName: '',
-  label: '',
-  as: '',
-  href: '',
-};

package/src/ui/icon/icon.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Icon } from '.';
+
+export default {
+  title: 'UI/Icon',
+  component: Icon,
+  args: {
+    size: Icon.SIZE_MEDIUM,
+  },
+  argTypes: {
+    size: {
+      options: Object.values(Icon.SIZES),
+      control: { type: 'select' },
+    },
+    glyph: {
+      options: Object.values(Icon.ICONS),
+      control: { type: 'select' },
+    },
+  },
+} as Meta;
+
+const Template: Story = (args: any) => <Icon {...args} />;
+
+export const Standard = Template.bind({});
+
+Standard.args = {
+  glyph: Icon.ICONS.ARROW,
+};
+
+export const CustomSize = Template.bind({});
+
+CustomSize.args = {
+  glyph: Icon.ICONS.ARROW,
+  size: Icon.SIZE_LARGE,
+};
+
+export const All = ({ size }: Pick<React.ComponentProps<typeof Icon>, 'size'>) => (
+  <>
+    {Object.values(Icon.ICONS).map((glyph) => (
+      <div
+        style={{
+          display: 'inline-block',
+          padding: '1rem',
+          textAlign: 'center',
+        }}
+      >
+        <Icon glyph={glyph} size={size} key={glyph} />
+        <code style={{ display: 'block' }}>{glyph}</code>
+      </div>
+    ))}
+  </>
+);

package/src/ui/icon/icon.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './icon.module.css';
+
+const ICONS = {
+  ARROW: 'arrow',
+  ARROW_RIGHT_CIRCLE: 'arrow-right-circle',
+  CANCEL: 'close',
+  CHEVRON_DOWN: 'chevron-down',
+  CHEVRON_UP: 'chevron-up',
+  CHECK: 'check',
+  CLOSE: 'close',
+  CLOCK: 'clock',
+  COMMIT: 'commit',
+  CLIPBOARD: 'clipboard',
+  CLIPBOARD_CHECK: 'clipboard-check',
+  DOWNLOAD: 'download',
+  ERROR: 'error',
+  EXTERNAL_LINK: 'external-link',
+  FILTER: 'filter',
+  GITHUB: 'github',
+  INFO: 'info',
+  HELP: 'help',
+  TABLE: 'table',
+  TREEMAP: 'treemap',
+  MENU: 'menu',
+  MORE_VERTICAL: 'more-vertical',
+  SORT: 'sort',
+  WARNING: 'warning',
+} as const;
+
+const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export type IconGlyph = (typeof ICONS)[keyof typeof ICONS];
+
+interface IconProps {
+  glyph: IconGlyph;
+  size?: (typeof SIZE)[keyof typeof SIZE];
+  as?: React.ElementType;
+}
+
+export const Icon = (props: IconProps & React.ComponentProps<'span'>) => {
+  const { className = '', glyph, as: Component = 'span', size = SIZE.MEDIUM, ...restProps } = props;
+
+  return (
+    <Component className={cx(css.root, className, css[size])} {...restProps}>
+      <svg className={css.icon}>
+        <use xlinkHref={`#${glyph}`} />
+      </svg>
+    </Component>
+  );
+};
+
+Icon.ICONS = ICONS;
+
+Icon.SIZE_SMALL = SIZE.SMALL;
+Icon.SIZE_MEDIUM = SIZE.MEDIUM;
+Icon.SIZE_LARGE = SIZE.LARGE;
+Icon.SIZES = Object.values(SIZE);

package/src/ui/index.js

@@ -1,18 +1,22 @@
 export { Alert } from './alert';
+export { Button } from './button';
+export { CopyToClipboard } from './copy-to-clipboard';
 export { Container } from './container';
+export { ControlGroup } from './control-group';
+export { Dialog } from './dialog';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
-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 { Panels } from './panels';
+export { Markdown } from './markdown';
 export { Skeleton } from './skeleton';
-export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';
 export { Tabs } from './tabs';
 export { Tag } from './tag';
+export { Textarea } from './textarea';
 export { Tooltip } from './tooltip';

package/src/ui/input/input.module.css

@@ -1,6 +1,6 @@
 .root {
-  border: 1px solid var(--color-outline);;
-  border-radius: 0;
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
   transition: var(--transition-in);
@@ -26,7 +26,6 @@
 
 .root:focus {
   border-color: var(--color-outline-dark);
-  box-shadow: var(--shadow-layer);
   color: inherit;
   transition: var(--transition-out);
 }

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/ui/input-search/input-search.module.css

@@ -0,0 +1,18 @@
+.root {
+  width: 100%;
+  position: relative;
+  z-index: var(--layout-low); /** show collapsed border on focus */
+}
+
+.input {
+  height: var(--space-large);
+}
+
+.cancelButton {
+  position: absolute;
+  right: var(--space-xxxsmall);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: var(--space-xxxsmall);
+  background: radial-gradient(var(--color-background) 50%, transparent);
+}

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

@@ -0,0 +1,86 @@
+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"
+        autoCorrect="off"
+        autoCapitalize="off"
+      />
+      {value && (
+        <Button
+          size="small"
+          radius="circle"
+          glyph={Icon.ICONS.CANCEL}
+          type="button"
+          onClick={clearButtonOnClick}
+          aria-label="Clear search"
+          className={css.cancelButton}
+        />
+      )}
+    </div>
+  );
+};

package/src/ui/loader/loader.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import css from './loader.module.css';
 
-export const Loader = ({ className, size, ...restProps }) => (
+export const Loader = ({ className = '', size = 'medium', ...restProps }) => (
   <span className={cx(css.root, className, css[size])} {...restProps} />
 );
 

package/src/ui/markdown/index.ts

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

package/src/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/src/ui/markdown/markdown.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Markdown } from '.';
+
+const meta: Meta<typeof Markdown> = {
+  title: 'UI/Markdown',
+  component: Markdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: '**One line** _markdown_ content',
+  },
+};
+
+const MULTI_LINE_MARKDOWN = `
+**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et malesuada.
+
+Eget nunc scelerisque viverra mauris in. Ipsum dolor sit amet consectetur adipiscing.
+`;
+
+export const MultiLine: Story = {
+  args: {
+    content: MULTI_LINE_MARKDOWN,
+  },
+};

package/src/ui/markdown/markdown.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, ElementType, useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+
+import css from './markdown.module.css';
+
+type MarkdownProps = {
+  content?: string;
+  as?: ElementType;
+} & ComponentProps<'div'>;
+
+export const Markdown = (props: MarkdownProps) => {
+  const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+
+  const html = useMemo(() => snarkdown(content), [content]);
+
+  return (
+    <Component
+      className={cx(css.root, className)}
+      {...restProps}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,9 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
+  border-radius: var(--radius-medium);
 }
 
 /** empty char to keep the text height */
@@ -13,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }