@indico-data/design-system 2.19.0 → 2.20.0

package/lib/src/components/index.d.ts

@@ -12,3 +12,5 @@ export { Select } from './forms/select';
 export { Form } from './forms/form';
 export { Skeleton } from './skeleton';
 export { Card } from './card';
+export { Popper } from './popper';
+export { Menu } from './menu';

package/lib/src/components/menu/Menu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export type MenuProps = {
+    children: React.ReactNode;
+};
+export declare function Menu({ children }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/src/components/menu/Menu.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuProps } from './Menu';
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<MenuProps>;
+export declare const Default: Story;

package/lib/src/components/menu/Menu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/menu/index.d.ts

@@ -0,0 +1 @@
+export { Menu } from './Menu';

package/lib/src/components/popper/Popper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react-dom';
+export type PopperProps = {
+    children: React.ReactNode;
+    referenceElement: HTMLElement | null;
+    isOpen: boolean;
+    onClose: () => void;
+    ariaLabel: string;
+    placement?: Placement;
+    offsetValue?: number;
+};
+export declare function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placement, offsetValue, }: PopperProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/src/components/popper/Popper.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Popper, PopperProps } from './Popper';
+declare const meta: Meta<typeof Popper>;
+export default meta;
+type Story = StoryObj<PopperProps>;
+export declare const Default: Story;

package/lib/src/components/popper/Popper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/popper/index.d.ts

@@ -0,0 +1 @@
+export { Popper } from './Popper';

package/lib/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useClickOutside: (ref: React.MutableRefObject<HTMLElement>, handler: (e: MouseEvent | TouchEvent) => void) => void;

package/lib/src/index.d.ts

@@ -17,3 +17,5 @@ export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
+export { Popper } from './components/popper';
+export { Menu } from './components/menu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -28,6 +28,7 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package/src/components/index.ts

@@ -12,3 +12,5 @@ export { Select } from './forms/select';
 export { Form } from './forms/form';
 export { Skeleton } from './skeleton';
 export { Card } from './card';
+export { Popper } from './popper';
+export { Menu } from './menu';

package/src/components/menu/Menu.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Menu from './Menu.stories';
+import { Col, Row } from '@/components';
+
+<Meta title="Components/Menu" of={Menu} />
+
+# Menu
+
+The Menu component is used to display a list of actionable items. Typically used in dropdowns, poppers, or sidebars.
+
+<Canvas of={Menu.Default} />
+
+### The following props are available for the Menu component:
+
+<Controls of={Menu.Default} />

package/src/components/menu/Menu.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuProps } from './Menu';
+import { Button } from '../button';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+  argTypes: {
+    children: {
+      control: 'text',
+      description:
+        'The children of the Menu component, which will be automatically styled as menu-items.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MenuProps>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <Button
+        data-testid="refresh-library"
+        ariaLabel="Refresh Data"
+        iconName="retrain"
+        onClick={() => console.log('Refresh Data')}
+      >
+        Refresh Data
+      </Button>
+      <Button
+        data-testid="configure-fields"
+        ariaLabel="Configure Fields"
+        iconName="edit"
+        onClick={() => console.log('Configure Fields')}
+      >
+        Configure Fields
+      </Button>
+      <Button
+        data-testid="delete-library"
+        ariaLabel="Delete Library"
+        iconName="trash"
+        onClick={() => console.log('Delete Library')}
+      >
+        Delete Library
+      </Button>
+    </Menu>
+  ),
+};

package/src/components/menu/Menu.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Menu } from './Menu';
+import { Button } from '../button';
+
+describe('Menu Component', () => {
+  it('renders children inside of the menu', () => {
+    render(
+      <Menu>
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+          Refresh Data
+        </Button>
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+          Configure Fields
+        </Button>
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+    expect(screen.getByText('Refresh Data')).toBeInTheDocument();
+    expect(screen.getByText('Configure Fields')).toBeInTheDocument();
+    expect(screen.getByText('Delete Library')).toBeInTheDocument();
+  });
+
+  it('applies the menu-item class to its children', () => {
+    render(
+      <Menu>
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+          Refresh Data
+        </Button>
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+          Configure Fields
+        </Button>
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+    const menuItems = screen.getAllByRole('button');
+    menuItems.forEach((item) => {
+      expect(item).toHaveClass('menu-item');
+    });
+  });
+
+  it('handles click events for its children', () => {
+    const mockRefresh = jest.fn();
+    const mockConfigure = jest.fn();
+    const mockDelete = jest.fn();
+
+    render(
+      <Menu>
+        <Button
+          data-testid="refresh-library"
+          ariaLabel="Refresh Data"
+          iconName="retrain"
+          onClick={mockRefresh}
+        >
+          Refresh Data
+        </Button>
+        <Button
+          data-testid="configure-fields"
+          ariaLabel="Configure Fields"
+          iconName="edit"
+          onClick={mockConfigure}
+        >
+          Configure Fields
+        </Button>
+        <Button
+          data-testid="delete-library"
+          ariaLabel="Delete Library"
+          iconName="trash"
+          onClick={mockDelete}
+        >
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+
+    fireEvent.click(screen.getByText('Refresh Data'));
+    fireEvent.click(screen.getByText('Configure Fields'));
+    fireEvent.click(screen.getByText('Delete Library'));
+
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+    expect(mockConfigure).toHaveBeenCalledTimes(1);
+    expect(mockDelete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/menu/Menu.tsx

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+
+export type MenuProps = {
+  children: React.ReactNode;
+};
+
+export function Menu({ children }: MenuProps) {
+  return (
+    <div className="menu">
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as ReactElement, {
+              className: classNames((child as ReactElement).props.className, 'menu-item'),
+            })
+          : child,
+      )}
+    </div>
+  );
+}

package/src/components/menu/index.ts

@@ -0,0 +1 @@
+export { Menu } from './Menu';

package/src/components/menu/styles/Menu.scss

@@ -0,0 +1,19 @@
+@import './variables.scss';
+
+.menu {
+  border-radius: var(--pf-menu-rounded);
+
+  .menu-item {
+    width: 100%;
+    background: var(--pf-menu-item-background-color);
+    color: var(--pf-menu-item-color);
+    display: block;
+    width: 100%;
+    text-align: left;
+    border: none;
+
+    &:hover {
+      background: var(--pf-menu-item-hover-color);
+    }
+  }
+}

package/src/components/menu/styles/_variables.scss

@@ -0,0 +1,15 @@
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-menu-rounded: var(--pf-rounded);
+  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-background-color: var(--pf-white-color);
+  --pf-menu-item-color: var(--pf-gray-color);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-menu-item-hover-color: var(--pf-primary-color-300);
+  --pf-menu-item-background-color: var(--pf-primary-color-600);
+  --pf-menu-item-color: var(--pf-gray-color-100);
+}

package/src/components/popper/Popper.mdx

@@ -0,0 +1,79 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as PopperStories from './Popper.stories';
+import { Col, Row } from '@/components';
+
+<Meta title="Components/Popper" of={PopperStories} />
+
+# Popper
+
+The Popper component is used to display content relative to another element. It can be used for tooltips, dropdowns, and other floating elements. The Popper is positioned using the `@floating-ui/react-dom` library.
+
+<Canvas
+  of={PopperStories.Default}
+  source={{
+    code: `
+import React, { useState, useRef } from 'react';
+import { Popper } from '@/components/Popper';
+import { Button } from '@/components/Button';
+import { Menu } from '@/components/Menu';
+
+const Example = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <div>
+      <div ref={buttonRef}>
+        <Button
+          onClick={() => setIsOpen((prev) => !prev)}
+          iconName="kabob"
+          ariaLabel="Toggle Popper"
+        />
+      </div>
+      <Popper
+        referenceElement={buttonRef.current}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        ariaLabel="Example Popper"
+        placement="bottom-start"
+        offsetValue={5}
+      >
+        <Menu>
+          <Button
+            data-testid="refresh-library"
+            ariaLabel="Refresh Data"
+            iconName="retrain"
+            onClick={() => console.log('Refresh Data')}
+          >
+            Refresh Data
+          </Button>
+          <Button
+            data-testid="configure-fields"
+            ariaLabel="Configure Fields"
+            iconName="edit"
+            onClick={() => console.log('Configure Fields')}
+          >
+            Configure Fields
+          </Button>
+          <Button
+            data-testid="delete-library"
+            ariaLabel="Delete Library"
+            iconName="trash"
+            onClick={() => console.log('Delete Library')}
+          >
+            Delete Library
+          </Button>
+        </Menu>
+      </Popper>
+    </div>
+  );
+};
+
+export default Example;
+    `,
+  }}
+/>
+
+### The following props are available for the Popper component:
+
+<Controls of={PopperStories.Default} />

package/src/components/popper/Popper.stories.tsx

@@ -0,0 +1,161 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState, useRef } from 'react';
+import { Popper, PopperProps } from './Popper';
+import { Button } from '../button';
+import { Menu } from '../menu';
+
+const meta: Meta<typeof Popper> = {
+  title: 'Components/Popper',
+  component: Popper,
+  argTypes: {
+    children: {
+      control: 'object',
+      description: 'The content of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    referenceElement: {
+      control: 'object',
+      description: 'The element to which the popper is attached.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'HTMLElement | null',
+        },
+      },
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls the visibility of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback function when the popper closes.',
+      table: { category: 'callbacks' },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Sets the aria-label attribute for the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+      description: 'Sets the placement of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'bottom-start' },
+      },
+    },
+    offsetValue: {
+      control: 'number',
+      description: 'Sets the offset value for the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+        defaultValue: { summary: '5' },
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div
+        style={{
+          height: '160px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<PopperProps>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+      <div>
+        <div ref={buttonRef}>
+          <Button
+            onClick={() => setIsOpen((prev) => !prev)}
+            iconName="kabob"
+            ariaLabel="Toggle Popper"
+          />
+        </div>
+        <Popper
+          {...args}
+          referenceElement={buttonRef.current}
+          isOpen={isOpen || args.isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <Menu>
+            <Button
+              data-testid="refresh-library"
+              ariaLabel="Refresh Data"
+              iconName="retrain"
+              onClick={() => console.log('Refresh Data')}
+            >
+              Refresh Data
+            </Button>
+            <Button
+              data-testid="configure-fields"
+              ariaLabel="Configure Fields"
+              iconName="edit"
+              onClick={() => console.log('Configure Fields')}
+            >
+              Configure Fields
+            </Button>
+            <Button
+              data-testid="delete-library"
+              ariaLabel="Delete Library"
+              iconName="trash"
+              onClick={() => console.log('Delete Library')}
+            >
+              Delete Library
+            </Button>
+          </Menu>
+        </Popper>
+      </div>
+    );
+  },
+};

package/src/components/popper/Popper.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Popper } from './Popper';
+import { Menu } from '../menu';
+import { Button } from '../button';
+
+describe('Popper Component', () => {
+  it('renders without display when isOpen is false', () => {
+    render(
+      <Popper referenceElement={null} isOpen={false} onClose={jest.fn()} ariaLabel="Example Popper">
+        <div>Popper Content</div>
+      </Popper>,
+    );
+    expect(screen.queryByText('Popper Content')).not.toBeInTheDocument();
+  });
+
+  it('displays the popper content when isOpen is true', () => {
+    render(
+      <Popper referenceElement={null} isOpen={true} onClose={jest.fn()} ariaLabel="Example Popper">
+        <div>Popper Content</div>
+      </Popper>,
+    );
+    expect(screen.getByText('Popper Content')).toBeInTheDocument();
+  });
+
+  it('calls onClose when clicked outside', () => {
+    const mockOnClose = jest.fn();
+
+    render(
+      <div>
+        <div data-testid="outside">Outside Element</div>
+        <Popper
+          referenceElement={null}
+          isOpen={true}
+          onClose={mockOnClose}
+          ariaLabel="Example Popper"
+        >
+          <div>Popper Content</div>
+        </Popper>
+      </div>,
+    );
+
+    fireEvent.mouseDown(screen.getByTestId('outside'));
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children inside the popper', () => {
+    render(
+      <Popper referenceElement={null} isOpen={true} onClose={jest.fn()} ariaLabel="Example Popper">
+        <Menu>
+          <Button ariaLabel="Refresh Data" iconName="retrain">
+            Refresh Data
+          </Button>
+          <Button ariaLabel="Configure Fields" iconName="edit">
+            Configure Fields
+          </Button>
+          <Button ariaLabel="Delete Library" iconName="trash">
+            Delete Library
+          </Button>
+        </Menu>
+      </Popper>,
+    );
+
+    expect(screen.getByText('Refresh Data')).toBeInTheDocument();
+    expect(screen.getByText('Configure Fields')).toBeInTheDocument();
+    expect(screen.getByText('Delete Library')).toBeInTheDocument();
+  });
+});

package/src/components/popper/Popper.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { useFloating, offset, flip, shift, Placement } from '@floating-ui/react-dom';
+import { useClickOutside } from '@/hooks/useClickOutside';
+
+export type PopperProps = {
+  children: React.ReactNode;
+  referenceElement: HTMLElement | null;
+  isOpen: boolean;
+  onClose: () => void;
+  ariaLabel: string;
+  placement?: Placement;
+  offsetValue?: number;
+};
+
+export function Popper({
+  children,
+  referenceElement,
+  isOpen,
+  onClose,
+  ariaLabel,
+  placement = 'bottom-start',
+  offsetValue = 5,
+}: PopperProps) {
+  const popperContentRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+
+  const { x, y, strategy, refs } = useFloating({
+    placement,
+    middleware: [offset(offsetValue), flip(), shift()],
+    elements: {
+      reference: referenceElement,
+    },
+  });
+
+  useClickOutside(popperContentRef, onClose);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? '',
+        left: x ?? '',
+      }}
+      role="dialog"
+      aria-label={ariaLabel}
+      className="popper-container"
+    >
+      <div ref={popperContentRef} className="popper-content">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/popper/index.ts

@@ -0,0 +1 @@
+export { Popper } from './Popper';