@takaro/lib-components 0.0.1

package/src/components/actions/Button/style.ts

@@ -0,0 +1,148 @@
+import { styled, Color, Size, AlertVariants } from '../../../styled';
+import { shade } from 'polished';
+
+export type ButtonColor = Color | AlertVariants | 'background' | 'white';
+
+export const Default = styled.button<{
+  size: Size;
+  color: ButtonColor;
+  icon: boolean;
+  iconPosition: 'left' | 'right';
+  fullWidth: boolean;
+  isLoading: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'fit-content')};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  background-size: 200% auto;
+  cursor: ${({ isLoading }) => (isLoading ? 'default' : 'pointer')};
+  line-height: 1.9rem;
+  letter-spacing: 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 1px solid ${({ theme, color }) => theme.colors[color]};
+  background: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    background-position: right center;
+  }
+
+  span {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: ${({ theme, color }) => {
+      switch (color) {
+        case 'white':
+          return theme.colors.primary;
+        case 'background':
+          return theme.colors.text;
+        default:
+          return 'white';
+      }
+    }};
+
+    margin-left: ${({ icon, isLoading, iconPosition }): string =>
+      iconPosition === 'left' && (icon || isLoading) ? '10px' : '0px'};
+    margin-right: ${({ icon, isLoading, iconPosition }): string =>
+      iconPosition === 'right' && (icon || isLoading) ? '10px' : '0px'};
+  }
+
+  &:disabled {
+    cursor: default;
+    background: ${({ theme }) => theme.colors.disabled};
+    border-color: ${({ theme }) => theme.colors.disabled};
+  }
+
+  svg {
+    display: ${({ icon, isLoading }): string => (icon || isLoading ? 'block' : 'none')};
+    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+    fill: ${({ theme, color }) => {
+      switch (color) {
+        case 'white':
+          return theme.colors.primary;
+        case 'background':
+          return theme.colors.text;
+        default:
+          return 'white';
+      }
+    }};
+    stroke: white;
+  }
+
+  ${({ size, theme }) => {
+    switch (size) {
+      case 'tiny':
+        return `
+          padding: ${theme.spacing['0_25']} ${theme.spacing['0_75']};
+        `;
+      case 'small':
+        return `
+          padding: ${theme.spacing['0_5']} ${theme.spacing['1']}
+        `;
+      case 'medium':
+        return `
+          padding: ${theme.spacing['0_75']} ${theme.spacing['1_5']}
+        `;
+      case 'large':
+        return `
+          padding: ${theme.spacing['1']} ${theme.spacing['2']}
+        `;
+      case 'huge':
+        return `
+          span {
+            font-size: 105%;
+          }
+          padding: ${theme.spacing[1]} ${theme.spacing[2]}
+        `;
+    }
+  }}
+`;
+
+export const Outline = styled(Default)<{ color: ButtonColor }>`
+  background: transparent;
+  border: 0.1rem solid ${({ theme, color }): string => theme.colors[color]};
+  span {
+    color: ${({ theme, color }): string => theme.colors[color]};
+  }
+
+  &:hover {
+    background-position: right center;
+  }
+
+  &:disabled {
+    background: none;
+    border-color: ${({ theme }): string => theme.colors.text};
+    span {
+      color: ${({ theme }): string => theme.colors.text};
+    }
+    svg {
+      fill: ${({ theme }): string => theme.colors.backgroundAlt};
+      stroke: ${({ theme }): string => theme.colors.backgroundAlt};
+    }
+  }
+
+  svg {
+    fill: ${({ theme, color }): string => theme.colors[color]};
+    stroke: ${({ theme, color }): string => theme.colors[color]};
+  }
+`;
+
+export const Clear = styled(Outline)`
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  span {
+    color: ${({ theme, color }): string => theme.colors[color]};
+  }
+`;
+
+export const White = styled(Clear)`
+  background: ${({ theme }): string => theme.colors.white};
+  &:disabled {
+    background-color: white;
+  }
+`;

package/src/components/actions/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { ContextMenu, ContextMenuProps } from '.';
+
+const Container = styled.div`
+  border: 1px solid orange;
+`;
+
+export default {
+  title: 'Actions/ContextMenu',
+  component: ContextMenu,
+} as Meta<ContextMenuProps>;
+
+export const Document: StoryFn<ContextMenuProps> = () => {
+  return (
+    <Container>
+      The context menu does not receive a targetRef prop, so it is triggered on the entire document.
+      <ContextMenu>
+        <ContextMenu.Item label="Item 1" />
+        <ContextMenu.Item label="Item 2" />
+        <ContextMenu.Item label="Item 3" />
+      </ContextMenu>
+    </Container>
+  );
+};
+
+export const Target: StoryFn<ContextMenuProps> = () => {
+  const targetRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <Container ref={targetRef}>
+      <ContextMenu targetRef={targetRef}>
+        <ContextMenu.Item label="Item 1" />
+        <ContextMenu.Item label="Item 2" />
+        <ContextMenu.Item label="Item 3" />
+      </ContextMenu>
+    </Container>
+  );
+};

package/src/components/actions/ContextMenu/Group.tsx

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div<{ divider: boolean; hasChildren: boolean }>`
+  border-bottom: ${({ divider, theme, hasChildren }) =>
+    divider && hasChildren && `1px solid ${theme.colors.secondary}`};
+  padding-left: 0;
+  background-color: ${({ theme }) => theme.colors.background};
+  & > span {
+    opacity: 0.5;
+    padding-left: ${({ theme }) => theme.spacing[1]};
+    font-weight: 600;
+    font-size: ${({ theme }) => theme.fontSize.tiny};
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+interface DropdownGroupProps {
+  label?: string;
+  divider?: boolean;
+}
+
+export const ContextMenuGroup: FC<PropsWithChildren<DropdownGroupProps>> = ({ label, divider = false, children }) => {
+  const showDivider = divider || label ? true : false;
+
+  return (
+    <Container role="group" divider={showDivider} hasChildren={Array.isArray(children) ? children.length !== 0 : true}>
+      {label && <span role="presentation">{label}</span>}
+      {children}
+    </Container>
+  );
+};

package/src/components/actions/ContextMenu/MenuItem.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.button`
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  width: 100%;
+  text-align: left;
+  gap: ${({ theme }) => theme.spacing[1]};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['1_5']}`};
+
+  &:first-child {
+    border-top-left-radius: ${({ theme }) => theme.borderRadius.medium};
+    border-top-right-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+
+  &:last-child {
+    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.medium};
+    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.medium};
+  }
+
+  display: grid;
+  grid-template-columns: auto 50px auto;
+  align-items: center;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.background};
+    }
+  }
+`;
+
+export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  shortcut?: string;
+  disabled?: boolean;
+}
+
+export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ label, shortcut, disabled, ...props }, ref) => {
+  const containerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const labelSpan = containerRef.current.children[0] as HTMLSpanElement;
+      const shortcutSpan = containerRef.current.children[1] as HTMLSpanElement;
+      const totalWidth = labelSpan.offsetWidth + shortcutSpan.offsetWidth + 60;
+      containerRef.current.style.minWidth = `${totalWidth}px`;
+    }
+  }, [label, shortcut]);
+
+  return (
+    <Container {...props} ref={ref} role="menuitem" disabled={disabled}>
+      <span>{label}</span>
+      <span></span>
+      <span style={{ textAlign: 'right' }}>{shortcut}</span>
+    </Container>
+  );
+});

package/src/components/actions/ContextMenu/index.tsx

@@ -0,0 +1,217 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+  HTMLProps,
+  RefObject,
+  ReactElement,
+} from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useRole,
+  useDismiss,
+  useInteractions,
+  useListNavigation,
+  useTypeahead,
+  FloatingPortal,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+import { MenuItem, MenuItemProps } from './MenuItem';
+import { ContextMenuGroup } from './Group';
+
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  box-shadow: ${({ theme }) => theme.elevation[2]};
+  background-color: ${({ theme }) => theme.colors.background};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+export interface ContextMenuProps extends HTMLProps<HTMLButtonElement> {
+  label?: string;
+  nested?: boolean;
+  targetRef?: RefObject<HTMLElement>;
+}
+
+type ContextMenuComponent = {
+  (props: ContextMenuProps, ref: React.Ref<HTMLButtonElement>): JSX.Element;
+  Item: typeof MenuItem;
+  Group: typeof ContextMenuGroup;
+};
+
+export const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>(({ children, targetRef }, _ref) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);
+  const listContentRef = useRef(
+    Children.map(children, (child) => (isValidElement(child) ? child.props.label : null)) as Array<string | null>
+  );
+  const allowMouseUpCloseRef = useRef(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      offset({ mainAxis: 5, alignmentAxis: 4 }),
+      flip({
+        fallbackPlacements: ['left-start'],
+      }),
+      shift({ padding: 10 }),
+    ],
+    placement: 'right-start',
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const role = useRole(context, { role: 'menu' });
+  const dismiss = useDismiss(context);
+  const listNavigation = useListNavigation(context, {
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex,
+    activeIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex,
+    activeIndex,
+  });
+
+  const { getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNavigation, typeahead]);
+
+  useEffect(() => {
+    let timeout: number;
+
+    function onContextMenu(e: MouseEvent) {
+      if (targetRef?.current && targetRef?.current.contains(e.target as Node)) {
+        e.preventDefault();
+        refs.setPositionReference({
+          getBoundingClientRect() {
+            return {
+              width: 0,
+              height: 0,
+              x: e.clientX,
+              y: e.clientY,
+              top: e.clientY,
+              right: e.clientX,
+              bottom: e.clientY,
+              left: e.clientX,
+            };
+          },
+        });
+
+        setIsOpen(true);
+        clearTimeout(timeout);
+
+        allowMouseUpCloseRef.current = false;
+        timeout = window.setTimeout(() => {
+          allowMouseUpCloseRef.current = true;
+        }, 300);
+      }
+    }
+
+    function onMouseUp() {
+      if (allowMouseUpCloseRef.current) {
+        setIsOpen(false);
+      }
+    }
+
+    if (targetRef?.current) {
+      targetRef.current.addEventListener('contextmenu', onContextMenu);
+      targetRef.current.addEventListener('mouseup', onMouseUp);
+    } else {
+      document.addEventListener('contextmenu', onContextMenu);
+      document.addEventListener('mouseup', onMouseUp);
+    }
+
+    return () => {
+      if (targetRef?.current) {
+        targetRef.current.removeEventListener('contextmenu', onContextMenu);
+        targetRef.current.removeEventListener('mouseup', onMouseUp);
+      } else {
+        document.removeEventListener('contextmenu', onContextMenu);
+        document.removeEventListener('mouseup', onMouseUp);
+      }
+      clearTimeout(timeout);
+    };
+  }, [refs]);
+
+  return (
+    <FloatingPortal>
+      {isOpen && (
+        <FloatingFocusManager context={context} initialFocus={refs.floating}>
+          <Container className="ContextMenu" ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            {Children.map(children, (child, index) => {
+              if (isValidElement(child)) {
+                // If child is a Group, iterate over its children
+                if (child.type === ContextMenu.Group) {
+                  const newGroupChildren = Children.map(
+                    child.props.children,
+                    (groupChild: ReactElement<MenuItemProps>, groupIndex) => {
+                      if (isValidElement(groupChild)) {
+                        return cloneElement(
+                          groupChild,
+                          getItemProps({
+                            tabIndex: activeIndex === index ? 0 : -1,
+                            ref(node: HTMLButtonElement) {
+                              listItemsRef.current[groupIndex] = node;
+                            },
+                            onClick(e: React.MouseEvent<HTMLButtonElement>) {
+                              groupChild.props.onClick?.(e);
+                              setIsOpen(false);
+                            },
+                            onMouseUp(e: React.MouseEvent<HTMLButtonElement>) {
+                              groupChild.props.onClick?.(e);
+                              setIsOpen(false);
+                            },
+                          })
+                        );
+                      }
+                      return groupChild;
+                    }
+                  );
+                  return <ContextMenu.Group {...child.props}>{newGroupChildren}</ContextMenu.Group>;
+                }
+
+                // If child is not a Group, handle it as before
+                return cloneElement(
+                  child,
+                  getItemProps({
+                    tabIndex: activeIndex === index ? 0 : -1,
+                    ref(node: HTMLButtonElement) {
+                      listItemsRef.current[index] = node;
+                    },
+                    onClick(e) {
+                      child.props.onClick?.(e);
+                      setIsOpen(false);
+                    },
+                    onMouseUp(e) {
+                      child.props.onClick?.(e);
+                      setIsOpen(false);
+                    },
+                  })
+                );
+              }
+            })}
+          </Container>
+        </FloatingFocusManager>
+      )}
+    </FloatingPortal>
+  );
+}) as unknown as ContextMenuComponent;
+
+ContextMenu.Item = MenuItem;
+ContextMenu.Group = ContextMenuGroup;

package/src/components/actions/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { IconButton } from '../../../components';
+import { Dropdown } from '.';
+import { DropdownMenu } from './DropdownMenu';
+import {
+  AiOutlineMenu as MenuIcon,
+  AiOutlineEdit as EditIcon,
+  AiOutlineSortAscending as SortAscendingIcon,
+  AiOutlineSortDescending as SortDescendingIcon,
+  AiOutlineFilter as FilterIcon,
+  AiOutlineGroup as GroupIcon,
+  AiOutlineEyeInvisible as HideIcon,
+  AiOutlineDelete as DeleteIcon,
+} from 'react-icons/ai';
+import { styled } from '../../../styled';
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export default {
+  title: 'Actions/Dropdown',
+  component: Dropdown,
+} as Meta;
+
+export const Default: StoryFn = () => {
+  return (
+    <Wrapper>
+      <Dropdown>
+        <Dropdown.Trigger asChild>
+          <IconButton icon={<MenuIcon />} ariaLabel="click me" />
+        </Dropdown.Trigger>
+        <Dropdown.Menu>
+          <DropdownMenu.Group label="Sorting">
+            <Dropdown.Menu.Item label="Sort ascending (first...last)" onClick={() => {}} icon={<SortAscendingIcon />} />
+            <Dropdown.Menu.Item
+              label="Sort descending (last...first)"
+              onClick={() => {}}
+              icon={<SortDescendingIcon />}
+            />
+          </DropdownMenu.Group>
+
+          <DropdownMenu.Group label="Editing">
+            <Dropdown.Menu.Item iconPosition="right" label="Edit values..." onClick={() => {}} icon={<EditIcon />} />
+            <Dropdown.Menu.Item
+              iconPosition="right"
+              label="Filter by values"
+              onClick={() => {}}
+              icon={<FilterIcon />}
+            />
+            <Dropdown.Menu.Item iconPosition="right" label="Group by values" onClick={() => {}} icon={<GroupIcon />} />
+          </DropdownMenu.Group>
+
+          <DropdownMenu.Group>
+            <Dropdown.Menu.Item label="Hide field" onClick={() => {}} icon={<HideIcon />} disabled />
+            <Dropdown.Menu.Item label="Delete field" onClick={() => {}} icon={<DeleteIcon />} />
+          </DropdownMenu.Group>
+        </Dropdown.Menu>
+      </Dropdown>
+    </Wrapper>
+  );
+};
+
+export const ToolTipOnTrigger = () => {
+  return (
+    <>
+      Because <strong>Dropdown.trigger</strong> adds properties to the child element, The IconButton cannot be wrapped
+      in a tooltip. Tooltip props should be passed as props to the <strong>Dropdown.trigger</strong> element.
+      <Dropdown>
+        <Dropdown.Trigger
+          asChild
+          tooltipOptions={{
+            content: 'This is the tooltip',
+            placement: 'top',
+          }}
+        >
+          <IconButton icon={<MenuIcon />} ariaLabel="click me" />
+        </Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Menu.Item label="Sort ascending (first...last)" onClick={() => {}} icon={<SortAscendingIcon />} />
+          <Dropdown.Menu.Item label="Sort descending (last...first)" onClick={() => {}} icon={<SortDescendingIcon />} />
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+};

package/src/components/actions/Dropdown/DropdownContext.tsx

@@ -0,0 +1,21 @@
+import { useContext, createContext, Dispatch, SetStateAction } from 'react';
+import { useDropdown } from './useDropdown';
+
+type ContextType =
+  | (ReturnType<typeof useDropdown> & {
+      setLabelId: Dispatch<SetStateAction<string | undefined>>;
+      setDescriptionId: Dispatch<SetStateAction<string | undefined>>;
+    })
+  | null;
+
+export const DropdownContext = createContext<ContextType>(null);
+
+export const useDropdownContext = () => {
+  const context = useContext(DropdownContext);
+
+  if (context == null) {
+    throw new Error('Dropdown components must be wrapped in <Dropdown />');
+  }
+
+  return context;
+};

package/src/components/actions/Dropdown/DropdownMenu.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, HTMLProps, Ref } from 'react';
+import {
+  useMergeRefs,
+  FloatingPortal,
+  FloatingFocusManager,
+  FloatingList,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import { useDropdownContext } from './DropdownContext';
+import { DropdownMenuItem } from './DropdownMenuItem';
+import { DropdownMenuGroup } from './DropdownMenuGroup';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  padding: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+type DropdownMenuComponent = {
+  (props: HTMLProps<HTMLDivElement>, ref: Ref<HTMLButtonElement>): JSX.Element;
+  Item: typeof DropdownMenuItem;
+  Group: typeof DropdownMenuGroup;
+};
+
+export const DropdownMenu = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ children, ...props }, propRef) => {
+  const { context, floatingStyles, elementsRef, labelsRef, getFloatingProps, descriptionId, labelId } =
+    useDropdownContext();
+
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: {
+      open: 0,
+      close: 100,
+    },
+    initial: () => ({
+      opacity: 0,
+      open: { opacity: 1 },
+      close: { opacity: 0 },
+    }),
+  });
+
+  return (
+    <FloatingPortal>
+      {isMounted && (
+        <FloatingFocusManager context={context} modal={false}>
+          <Container
+            ref={ref}
+            style={{ ...transitionStyles, ...floatingStyles }}
+            aria-labelledby={labelId}
+            aria-describedby={descriptionId}
+            {...getFloatingProps(props)}
+          >
+            <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+              {children}
+            </FloatingList>
+          </Container>
+        </FloatingFocusManager>
+      )}
+    </FloatingPortal>
+  );
+}) as unknown as DropdownMenuComponent;
+
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.Group = DropdownMenuGroup;