@axinom/mosaic-ui 0.75.0-rc.5 → 0.77.0

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -0,0 +1,205 @@
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useMemo, useState } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { action } from 'storybook/actions';
+import { EmptyStation } from '../EmptyStation';
+import { IconName } from '../Icons';
+import { List, ListSelectMode } from '../List';
+import { ActionBar } from './ActionBar';
+import type { ActionBarAction } from './ActionBar.model';
+
+type ActionBarStoryType = React.ComponentProps<typeof ActionBar> & {
+  containerWidth: string;
+};
+
+const actions: ActionBarAction[] = [
+  {
+    label: 'Edit',
+    icon: IconName.BulkEdit,
+    tag: 'BETA',
+    toggled: false,
+    onClick: action('Edit.onClick'),
+  },
+  {
+    label: 'Publish',
+    icon: IconName.Publish,
+    onClick: action('Publish.onClick'),
+  },
+  {
+    label: 'Unpublish',
+    icon: IconName.Unpublish,
+    confirmationMode: 'Simple',
+    onClick: action('Unpublish.onClick'),
+  },
+  {
+    label: 'Delete',
+    icon: IconName.Delete,
+    confirmationMode: 'Advanced',
+    confirmationConfig: {
+      title: 'Delete the selected items?',
+      body: 'The action is irreversible.',
+    },
+    onClick: action('Delete.onClick'),
+  },
+  {
+    label: 'Archive',
+    icon: IconName.Archive,
+    disabled: true,
+    onClick: action('Archive.onClick'),
+  },
+  {
+    label: 'Export Settings',
+    icon: IconName.External,
+    path: '/export-settings',
+  },
+];
+
+const meta: Meta<ActionBarStoryType> = {
+  title: 'Other Components/ActionBar',
+  component: ActionBar,
+  argTypes: {
+    actions: { control: false },
+    containerWidth: {
+      description: `<b>[Storybook only]</b> Width of the element the bar is rendered in.`,
+    },
+  },
+  args: {
+    label: 'Selected 3',
+    actions,
+    containerWidth: '100%',
+  },
+  decorators: [
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: ({ containerWidth, ...args }) => (
+    <div style={{ width: containerWidth }}>
+      <ActionBar {...args} />
+    </div>
+  ),
+};
+export default meta;
+
+export const Default: StoryObj<ActionBarStoryType> = {
+  parameters: {
+    docs: {
+      description: {
+        story: `The bar renders a label at its start and the actions at its end. Actions run a handler, optionally behind a 'Simple' or 'Advanced' confirmation, or navigate when they have a 'path'.
+        They can be toggled, disabled, and carry a tag.`,
+      },
+    },
+  },
+};
+
+export const Overflow: StoryObj<ActionBarStoryType> = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Actions that do not fit the available width move into an overflow menu at the end of the bar. The menu shows the tag of an action as part of its label.`,
+      },
+    },
+  },
+  args: {
+    containerWidth: '520px',
+  },
+};
+
+interface CompositionStoryData {
+  id: number;
+  title: string;
+  desc: string;
+}
+
+export const ExplorerLikeComposition: StoryObj<ActionBarStoryType> = {
+  name: 'Explorer-like composition',
+  parameters: {
+    docs: {
+      description: {
+        story: `An Explorer-like screen composed from its parts: an action on the page header toggles the bulk actions, which the List renders on its action bar through its 'actionBar' property.
+        The List keeps the bar in place above its column header. Render the ActionBar directly for content that is not a List.`,
+      },
+    },
+    controls: { disable: true },
+  },
+  render: () =>
+    React.createElement(() => {
+      const data = useMemo<CompositionStoryData[]>(
+        () =>
+          Array.from({ length: 30 }, (_, index) => ({
+            id: index + 1,
+            title: `Item ${index + 1}`,
+            desc: faker.lorem.sentence(),
+          })),
+        [],
+      );
+      const [isBulkOpen, setIsBulkOpen] = useState<boolean>(false);
+      const [selectedCount, setSelectedCount] = useState<number>(0);
+
+      const noSelection = selectedCount === 0;
+
+      return (
+        <EmptyStation
+          title="Custom Explorer"
+          actions={[
+            {
+              kind: 'action',
+              label: 'Bulk Actions',
+              icon: IconName.Bulk,
+              toggled: isBulkOpen,
+              onClick: () => {
+                setIsBulkOpen((open) => !open);
+                setSelectedCount(0);
+              },
+            },
+          ]}
+        >
+          <List<CompositionStoryData>
+            columns={[
+              { propertyName: 'id', label: 'Id', size: '60px' },
+              { propertyName: 'title', label: 'Title' },
+              { propertyName: 'desc', label: 'Description', size: '3fr' },
+            ]}
+            data={data}
+            selectionMode={
+              isBulkOpen ? ListSelectMode.Multi : ListSelectMode.None
+            }
+            onItemSelected={(event) =>
+              setSelectedCount(
+                event.mode === 'SELECT_ALL'
+                  ? data.length
+                  : event.items?.length ?? 0,
+              )
+            }
+            actionBar={{
+              label:
+                isBulkOpen && !noSelection
+                  ? `Selected ${selectedCount}`
+                  : `Total ${data.length}`,
+              actions: isBulkOpen
+                ? [
+                    {
+                      label: 'Publish',
+                      icon: IconName.Publish,
+                      disabled: noSelection,
+                      onClick: action('Publish.onClick'),
+                    },
+                    {
+                      label: 'Delete',
+                      icon: IconName.Delete,
+                      confirmationMode: 'Simple',
+                      disabled: noSelection,
+                      onClick: action('Delete.onClick'),
+                    },
+                  ]
+                : [],
+            }}
+          />
+        </EmptyStation>
+      );
+    }),
+};

package/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,170 @@
+import clsx from 'clsx';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import { useElementWidthObserver } from '../../hooks/useElementWidthObserver/useElementWidthObserver';
+import type { ActionData } from '../Actions';
+import { InlineMenu } from '../InlineMenu';
+import type { ActionBarAction, ActionBarData } from './ActionBar.model';
+import classes from './ActionBar.module.scss';
+import { ActionBarButton } from './ActionBarButton/ActionBarButton';
+import { getVisibleActionCount, isActionBarNavigationAction } from './helpers';
+
+/** Width of the overflow menu trigger. Has to match `.overflowMenuButton`. */
+const OVERFLOW_MENU_WIDTH_PX = 50;
+
+export interface ActionBarProps extends ActionBarData {
+  /** Height of the bar, not including its bottom border. (default: '44px') */
+  height?: string;
+  /** CSS Class name for additional styles */
+  className?: string;
+}
+
+/**
+ * Renders a bar with a label at its start and actions that run to its end, e.g.
+ * the bulk actions that apply to the items selected in a list.
+ *
+ * Actions that do not fit the available width are moved into an overflow menu.
+ *
+ * The List renders the bar on top of its column header through its `actionBar`
+ * property, and the PageHeader renders it below itself while an actions group
+ * is open. Render it directly to place it anywhere else.
+ *
+ * @example
+ * <ActionBar
+ *  label={'Selected 3'}
+ *  actions={[{ label: 'Delete', icon: IconName.Delete, onClick: deleteHandler }]}
+ * />
+ */
+export const ActionBar: React.FC<ActionBarProps> = ({
+  label,
+  actions,
+  height = '44px',
+  className = '',
+}) => {
+  const { width: availableWidth, ref: actionsRef } =
+    useElementWidthObserver<HTMLDivElement>();
+
+  /**
+   * Natural width of every action, measured while all of them are rendered.
+   * Tagged with the set it was taken for, so that a new set of actions is
+   * measured again instead of being collapsed by the widths of the old one.
+   */
+  const [measurement, setMeasurement] = useState<{
+    key: string;
+    widths: number[];
+  }>();
+
+  const actionsKey = actions
+    .map((action) =>
+      [action.label, action.tag ?? '', action.icon === undefined].join(':'),
+    )
+    .join('|');
+  const actionWidths =
+    measurement?.key === actionsKey ? measurement.widths : undefined;
+
+  useLayoutEffect(() => {
+    if (actionWidths !== undefined || actionsRef.current === null) {
+      return;
+    }
+
+    const widths = Array.from(actionsRef.current.children).map(
+      (child) => (child as HTMLElement).offsetWidth,
+    );
+
+    // Every action is rendered while the widths are unknown, so anything else
+    // means the measurement ran before the actions were laid out. Widths of 0
+    // are reported by environments without a layout engine, in which case the
+    // actions are left uncollapsed.
+    if (
+      widths.length !== actions.length ||
+      widths.some((width) => width <= 0)
+    ) {
+      return;
+    }
+
+    setMeasurement({ key: actionsKey, widths });
+  }, [actionWidths, actionsKey, actions.length, actionsRef]);
+
+  const visibleActionCount = useMemo(
+    () =>
+      actionWidths === undefined || availableWidth <= 0
+        ? actions.length
+        : getVisibleActionCount(
+            actionWidths,
+            availableWidth,
+            OVERFLOW_MENU_WIDTH_PX,
+          ),
+    [actionWidths, availableWidth, actions.length],
+  );
+
+  const overflowActions = actions.slice(visibleActionCount);
+
+  const customStyles = {
+    gridAutoRows: height,
+  } as React.CSSProperties;
+
+  return (
+    <div
+      className={clsx(classes.container, 'action-bar-container', className)}
+      style={customStyles}
+      data-test-id="action-bar"
+    >
+      <div className={classes.content}>
+        {label !== undefined && (
+          <span className={classes.label} data-test-id="action-bar-label">
+            {label}
+          </span>
+        )}
+        <div
+          className={clsx(classes.actions, {
+            [classes.measuring]: actionWidths === undefined,
+          })}
+          ref={actionsRef}
+        >
+          {actions.slice(0, visibleActionCount).map((action, index) => (
+            // Keyed by the set of actions, so that another set starts afresh
+            // rather than taking over e.g. a pending confirmation.
+            <ActionBarButton key={`${actionsKey}#${index}`} action={action} />
+          ))}
+          {overflowActions.length > 0 && (
+            <InlineMenu
+              actions={overflowActions.map(toActionData)}
+              placement="bottom-end"
+              showArrow={false}
+              width="250px"
+              buttonClassName={classes.overflowMenuButton}
+              className={classes.overflowMenu}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Converts an action of the bar into the shape the overflow menu renders, which
+ * keeps the confirmation behavior or the link of the action intact.
+ */
+const toActionData = (action: ActionBarAction): ActionData => {
+  // The menu has no room for a tag of its own, so it becomes part of the label.
+  const label = action.tag ? `${action.label} (${action.tag})` : action.label;
+  // The menu renders icon components only, so an image source is dropped.
+  const icon = typeof action.icon === 'string' ? undefined : action.icon;
+
+  return isActionBarNavigationAction(action)
+    ? {
+        label,
+        icon,
+        isDisabled: action.disabled,
+        path: action.path,
+        openInNewTab: action.openInNewTab,
+      }
+    : {
+        label,
+        icon,
+        isDisabled: action.disabled,
+        confirmationMode: action.confirmationMode,
+        confirmationConfig: action.confirmationConfig,
+        onActionSelected: action.onClick,
+      };
+};

package/src/components/ActionBar/ActionBarButton/ActionBarButton.module.scss

@@ -0,0 +1,140 @@
+@import '../../../styles/common.scss';
+
+.container {
+  all: unset; // remove all button and link styles
+
+  @include boxSizing;
+
+  height: 100%;
+  // Keeps the action from resizing while the 'Simple' confirmation replaces the
+  // label, which would otherwise shift the actions next to it.
+  min-width: var(--action-bar-action-min-width, $action-bar-action-min-width);
+  padding: 0 12px;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  color: var(--action-bar-action-color, $action-bar-action-color);
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+
+  .icon {
+    display: grid;
+    place-items: center;
+
+    > * {
+      height: var(--action-bar-action-icon-size, $action-bar-action-icon-size);
+    }
+  }
+
+  .label {
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  // Follows the color of the action, so that it matches its state.
+  .tag {
+    padding: 1px 4px;
+
+    border: 1px solid currentColor;
+    border-radius: 3px;
+
+    font-size: var(
+      --action-bar-action-tag-font-size,
+      $action-bar-action-tag-font-size
+    );
+    font-weight: bold;
+    line-height: 1.2;
+  }
+
+  .actionIcon {
+    rect,
+    polygon,
+    polyline,
+    path,
+    circle {
+      stroke: var(--action-bar-action-color, $action-bar-action-color);
+      stroke-width: var(
+        --action-bar-action-icon-stroke-width,
+        $action-bar-action-icon-stroke-width
+      );
+    }
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(
+      --action-bar-action-hover-background-color,
+      $action-bar-action-hover-background-color
+    );
+    transition: background-color $confirmation-transition linear;
+  }
+
+  &.toggled {
+    color: var(
+      --action-bar-action-toggled-color,
+      $action-bar-action-toggled-color
+    );
+
+    // Keeps its background while hovered, like the selected option of a Select.
+    &,
+    &:hover:not(:disabled) {
+      background-color: var(
+        --action-bar-action-toggled-background-color,
+        $action-bar-action-toggled-background-color
+      );
+    }
+
+    .actionIcon {
+      rect,
+      polygon,
+      polyline,
+      path,
+      circle {
+        stroke: var(
+          --action-bar-action-toggled-color,
+          $action-bar-action-toggled-color
+        );
+      }
+    }
+  }
+
+  &.hasConfirm,
+  &.hasConfirm:hover:not(:disabled) {
+    background-color: var(
+      --action-bar-action-confirmation-background-color,
+      $action-bar-action-confirmation-background-color
+    );
+  }
+
+  &:disabled {
+    color: var(
+      --action-bar-action-disabled-color,
+      $action-bar-action-disabled-color
+    );
+
+    cursor: default;
+
+    .actionIcon {
+      rect,
+      polygon,
+      polyline,
+      path,
+      circle {
+        stroke: var(
+          --action-bar-action-disabled-color,
+          $action-bar-action-disabled-color
+        );
+      }
+    }
+  }
+}

package/src/components/ActionBar/ActionBarButton/ActionBarButton.tsx

@@ -0,0 +1,193 @@
+import clsx from 'clsx';
+import React, { type PropsWithChildren } from 'react';
+import { Link } from 'react-router-dom';
+import { noop } from '../../../helpers/utils';
+import { useConfirmableAction } from '../../ConfirmDialog';
+import { IconName, Icons } from '../../Icons';
+import { ImgElement } from '../../VisualElements';
+import type {
+  ActionBarAction,
+  ActionBarJsAction,
+  ActionBarNavigationAction,
+} from '../ActionBar.model';
+import { isActionBarNavigationAction } from '../helpers';
+import classes from './ActionBarButton.module.scss';
+
+export interface ActionBarButtonProps {
+  /** The action to render */
+  action: ActionBarAction;
+  /** CSS Class name for additional styles */
+  className?: string;
+}
+
+/**
+ * Renders a single action of the ActionBar: a button running the handler of the
+ * action, or a link if the action has a `path`.
+ *
+ * Supports the same confirmation modes as the other action components: in
+ * 'Simple' mode the label is replaced by a confirmation message until the
+ * action is clicked a second time, in 'Advanced' mode a confirmation dialog is
+ * opened above the action.
+ *
+ * @example
+ * <ActionBarButton action={{ label: 'Delete', icon: IconName.Delete, onClick: deleteHandler }} />
+ */
+export const ActionBarButton: React.FC<ActionBarButtonProps> = ({
+  action,
+  className,
+}) =>
+  isActionBarNavigationAction(action) ? (
+    <NavigationActionButton action={action} className={className} />
+  ) : (
+    <JsActionButton action={action} className={className} />
+  );
+
+const JsActionButton: React.FC<{
+  action: ActionBarJsAction;
+  className?: string;
+}> = ({ action, className }) => {
+  const {
+    label,
+    icon,
+    imgAlt,
+    tag,
+    disabled = false,
+    toggled,
+    confirmationMode = 'None',
+    confirmationConfig = {},
+    onClick = noop,
+  } = action;
+
+  const {
+    isConfirming,
+    isSimpleConfirmation,
+    onTriggerClicked,
+    triggerProps,
+    simpleConfirmation,
+    advancedConfirmation,
+  } = useConfirmableAction<HTMLButtonElement>({
+    confirmationMode,
+    confirmationConfig,
+    onConfirmed: onClick,
+  });
+
+  return (
+    <>
+      <button
+        type="button"
+        className={clsx(
+          classes.container,
+          {
+            [classes.toggled]: toggled,
+            [classes.hasConfirm]: isConfirming,
+          },
+          'action-bar-action-container',
+          className,
+        )}
+        {...triggerProps}
+        onClick={(event) => {
+          event.preventDefault();
+          onTriggerClicked();
+        }}
+        disabled={disabled}
+        aria-pressed={toggled}
+        data-test-id="action"
+        data-test-toggled={toggled}
+      >
+        {/* The confirmation message takes up the room of the icon and the tag */}
+        <ActionContent
+          icon={isConfirming ? undefined : icon}
+          imgAlt={imgAlt}
+          tag={isConfirming ? undefined : tag}
+        >
+          {isSimpleConfirmation ? (
+            simpleConfirmation
+          ) : (
+            <span data-test-id="label">{label}</span>
+          )}
+        </ActionContent>
+      </button>
+      {advancedConfirmation}
+    </>
+  );
+};
+
+/**
+ * Renders a link to the path of the action. A disabled action renders as a
+ * disabled button instead, as a link cannot be disabled.
+ */
+const NavigationActionButton: React.FC<{
+  action: ActionBarNavigationAction;
+  className?: string;
+}> = ({ action, className }) => {
+  const {
+    label,
+    icon,
+    imgAlt,
+    tag,
+    disabled = false,
+    path,
+    openInNewTab = false,
+  } = action;
+
+  const classNames = clsx(
+    classes.container,
+    'action-bar-action-container',
+    className,
+  );
+
+  const content = (
+    <ActionContent
+      icon={icon ?? (openInNewTab ? IconName.External : undefined)}
+      imgAlt={imgAlt}
+      tag={tag}
+    >
+      <span data-test-id="label">{label}</span>
+    </ActionContent>
+  );
+
+  return disabled ? (
+    <button type="button" className={classNames} disabled data-test-id="action">
+      {content}
+    </button>
+  ) : (
+    <Link
+      to={path}
+      target={openInNewTab ? '_blank' : undefined}
+      className={classNames}
+      data-test-id="action"
+    >
+      {content}
+    </Link>
+  );
+};
+
+/** The icon, label and tag of an action. */
+const ActionContent: React.FC<
+  PropsWithChildren<{
+    icon?: IconName | string;
+    imgAlt?: string;
+    tag?: string;
+  }>
+> = ({ icon, imgAlt, tag, children }) => (
+  <>
+    {icon !== undefined && (
+      <span className={classes.icon}>
+        {typeof icon === 'string' ? (
+          <ImgElement
+            src={icon}
+            {...(imgAlt ? { alt: imgAlt } : { decorative: true as const })}
+          />
+        ) : (
+          <Icons icon={icon} className={classes.actionIcon} />
+        )}
+      </span>
+    )}
+    <span className={classes.label}>{children}</span>
+    {tag && (
+      <span className={classes.tag} data-test-id="tag">
+        {tag}
+      </span>
+    )}
+  </>
+);