@takaro/lib-components 0.0.1

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

@@ -0,0 +1,37 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div<{ divider: boolean; hasChildren: boolean }>`
+  padding-bottom: ${({ theme }) => theme.spacing['0_5']};
+  border-bottom: ${({ divider, theme, hasChildren }) =>
+    divider && hasChildren && `2px solid ${theme.colors.backgroundAccent}`};
+  margin-bottom: ${({ divider, theme, hasChildren }) => divider && hasChildren && theme.spacing['0_5']};
+  padding-left: 0;
+
+  & > 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 DropdownMenuGroup: 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/Dropdown/DropdownMenuItem.tsx

@@ -0,0 +1,128 @@
+import { useListItem } from '@floating-ui/react';
+import { cloneElement, FC, ReactElement, MouseEvent } from 'react';
+import { useDropdownContext } from './DropdownContext';
+import { styled } from '../../../styled';
+import { AiOutlineClose as UndoIcon, AiOutlineCheck as CheckmarkIcon } from 'react-icons/ai';
+import { motion } from 'framer-motion';
+import { GenericCheckBox } from '../../../components/inputs/CheckBox/Generic';
+
+const Container = styled(motion.button)<{ isActive: boolean }>`
+  background-color: ${({ theme, isActive }) => (isActive ? theme.colors.secondary : theme.colors.background)};
+  color: ${({ theme }) => theme.colors.text};
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['0_75']}`};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+
+  span {
+    margin-left: ${({ theme }) => theme.spacing['0_75']};
+  }
+
+  &:disabled {
+    span {
+      color: ${({ theme }) => theme.colors.textAlt};
+    }
+    svg {
+      fill: ${({ theme }) => theme.colors.textAlt};
+      stroke: ${({ theme }) => theme.colors.textAlt};
+    }
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+interface DropdownMenuItemProps {
+  label: string;
+  disabled?: boolean;
+  icon?: ReactElement;
+  iconPosition?: 'left' | 'right';
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+  active?: boolean;
+  activeStyle?: 'checkbox' | 'undo' | 'checkmark';
+}
+
+export const DropdownMenuItem: FC<DropdownMenuItemProps> = ({
+  label,
+  disabled,
+  onClick,
+  iconPosition = 'left',
+  activeStyle = 'undo',
+  active = false,
+  icon,
+}) => {
+  const { activeIndex, setOpen, getItemProps } = useDropdownContext();
+  const { ref, index } = useListItem();
+
+  const isActive = activeIndex === index;
+
+  const getIcon = () => {
+    if (icon) return cloneElement(icon, { size: 17 });
+  };
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    onClick(e);
+
+    if (activeStyle === 'undo') {
+      setOpen(false);
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (activeStyle === 'undo') {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Container
+      type="button"
+      onClick={handleClick}
+      onMouseUp={handleMouseUp}
+      isActive={isActive}
+      ref={ref}
+      tabIndex={disabled ? -1 : 0}
+      role="menuitem"
+      disabled={disabled}
+      {...getItemProps({
+        onClick: handleClick,
+        onMouseUp: handleMouseUp,
+      })}
+    >
+      {activeStyle === 'checkbox' && (
+        <GenericCheckBox
+          onChange={(e) => {
+            e.stopPropagation();
+          }}
+          value={active}
+          hasDescription={false}
+          size="tiny"
+          hasError={false}
+          name={`menu-item-checkbox-${label}`}
+          disabled={false}
+          readOnly
+          id={`menu-item-checkbox-${label}`}
+        />
+      )}
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: iconPosition === 'left' ? 'flex-start' : 'space-between',
+        }}
+      >
+        {icon && iconPosition === 'left' && getIcon()}
+        <span>{label}</span>
+        {icon && iconPosition === 'right' && getIcon()}
+      </div>
+      {active && activeStyle === 'undo' && <UndoIcon style={{ marginLeft: '10px' }} size={16} />}
+      {active && activeStyle === 'checkmark' && <CheckmarkIcon style={{ marginLeft: '10px' }} size={16} />}
+    </Container>
+  );
+};

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

@@ -0,0 +1,89 @@
+import {
+  forwardRef,
+  cloneElement,
+  isValidElement,
+  HTMLProps,
+  PropsWithChildren,
+  useState,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { useDropdownContext } from './DropdownContext';
+import { useMergeRefs } from '@floating-ui/react';
+import { TooltipOptions } from '../../feedback/Tooltip/useTooltip';
+import { Tooltip } from '../../../components';
+
+export type DropdownTriggerProps = HTMLProps<HTMLElement> &
+  PropsWithChildren<{
+    asChild?: boolean;
+    tooltipOptions?: TooltipOptions & { content: ReactNode };
+  }>;
+
+export const DropdownTrigger = forwardRef<HTMLElement, DropdownTriggerProps>(
+  (
+    {
+      children,
+      asChild = false,
+      tooltipOptions = {
+        initialOpen: false,
+        placement: 'top', // because dropdown will be below by default
+      },
+      ...props
+    },
+    propRef
+  ) => {
+    const context = useDropdownContext();
+    const childrenRef = (children as any).ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+    const [unControlledOpen, setUncontrolledOpen] = useState<boolean>(tooltipOptions?.initialOpen ?? false);
+
+    const open = tooltipOptions.open ?? unControlledOpen;
+    const setOpen = tooltipOptions.onOpenChange ?? setUncontrolledOpen;
+
+    let inner: ReactElement;
+
+    // `asChild` allows the user to pass any element as the anchor
+    if (asChild && isValidElement(children)) {
+      inner = cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          onClick(event) {
+            event.stopPropagation();
+          },
+        })
+      );
+    } else {
+      inner = (
+        <button
+          ref={ref}
+          type="button"
+          // The user can style the trigger based on the state
+          {...context.getReferenceProps({
+            ...props,
+            ref,
+            onClick(event) {
+              event.stopPropagation();
+            },
+          })}
+        >
+          {children}
+        </button>
+      );
+    }
+
+    if (tooltipOptions && tooltipOptions.content) {
+      return (
+        <Tooltip open={open} onOpenChange={setOpen} placement={tooltipOptions.placement}>
+          <Tooltip.Trigger>{inner}</Tooltip.Trigger>
+          <Tooltip.Content>{tooltipOptions.content}</Tooltip.Content>
+        </Tooltip>
+      );
+    }
+
+    return inner;
+  }
+);

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren, FC } from 'react';
+import { UseDropdownOptions, useDropdown } from './useDropdown';
+import { DropdownContext } from './DropdownContext';
+import { DropdownTrigger } from './DropdownTrigger';
+import { DropdownMenu } from './DropdownMenu';
+
+interface SubComponents {
+  Trigger: typeof DropdownTrigger;
+  Menu: typeof DropdownMenu;
+}
+
+export type DropdownProps = PropsWithChildren<UseDropdownOptions>;
+
+export const Dropdown: FC<DropdownProps> & SubComponents = ({ children, ...restOptions }) => {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const dropdown = useDropdown({ ...restOptions });
+  return <DropdownContext.Provider value={dropdown}>{children}</DropdownContext.Provider>;
+};
+
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Menu = DropdownMenu;

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

@@ -0,0 +1,82 @@
+import { useMemo, useRef, useState } from 'react';
+import {
+  autoUpdate,
+  offset,
+  Placement,
+  useFloating,
+  useInteractions,
+  useRole,
+  useDismiss,
+  useListNavigation,
+  useTypeahead,
+  useClick,
+  shift,
+} from '@floating-ui/react';
+
+export interface UseDropdownOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useDropdown({
+  initialOpen = false,
+  placement = 'bottom',
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: UseDropdownOptions) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const elementsRef = useRef<Array<HTMLButtonElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const { context, ...data } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset({ mainAxis: 10 }), shift()],
+  });
+
+  const interactions = useInteractions([
+    useClick(context, { enabled: controlledOpen == null }),
+    useRole(context, { role: 'menu' }),
+    useDismiss(context),
+    useListNavigation(context, {
+      listRef: elementsRef,
+      onNavigate: setActiveIndex,
+      activeIndex,
+    }),
+    useTypeahead(context, {
+      enabled: context.open,
+      activeIndex,
+      listRef: labelsRef,
+      onMatch: setActiveIndex,
+    }),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      context,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      activeIndex,
+      labelsRef,
+      elementsRef,
+    }),
+    [open, setOpen, data, context, labelId, descriptionId, interactions]
+  );
+}

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

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Action } from '../../../components';
+import { DropdownButton, DropdownButtonProps } from '.';
+
+const WrapperDecorator = styled.div`
+  padding: 5rem;
+  border-radius: 1rem;
+  background-color: ${({ theme }): string => theme.colors.background};
+  h4 {
+    font-weight: 600;
+  }
+`;
+
+export default {
+  title: 'Actions/DropdownButton',
+  component: DropdownButton,
+  decorators: [(story) => <WrapperDecorator>{story()}</WrapperDecorator>],
+} as Meta;
+
+export const Default: StoryFn<DropdownButtonProps> = () => {
+  const [message, setMessage] = useState<string>();
+
+  return (
+    <>
+      <DropdownButton>
+        <Action
+          onClick={() => {
+            setMessage('save changes event fired');
+          }}
+          text="Save changes"
+        >
+          Save changes
+        </Action>
+        <Action
+          onClick={() => {
+            setMessage('Save and schedule event fired');
+          }}
+          text="Save and schedule"
+        >
+          Save and schedule
+        </Action>
+        <Action
+          onClick={() => {
+            setMessage('save and published fired');
+          }}
+          text="Save and publish"
+        >
+          Save and publish
+        </Action>
+        <Action
+          onClick={() => {
+            setMessage('Export PDF event fired');
+          }}
+          text="Export PDF"
+        >
+          Export PDF
+        </Action>
+      </DropdownButton>
+      <p>{message}</p>
+    </>
+  );
+};
+
+export const Description: StoryFn<DropdownButtonProps> = () => {
+  const [message, setMessage] = useState<string>();
+
+  return (
+    <>
+      <DropdownButton>
+        <Action onClick={() => setMessage('Merge pull request is fired')} text="Merge pull request">
+          <h4>merge pull request</h4>
+          <p>All commits from this branch will be added to the base branchh via a merge commit.</p>
+        </Action>
+        <Action onClick={() => setMessage('Squash and merge is fired')} text="Squash and merge">
+          <h4>Squash and merge</h4>
+          <p>The 4 commits from this branch will be combined into one commit in the base branch.</p>
+        </Action>
+        <Action onClick={() => setMessage('Rebase and merge is fired.')} text="Rebase and merge">
+          <h4>Rebase and merge</h4>
+          <p>the 4 commits from this branch will be rebased and added to the base branch.</p>
+        </Action>
+      </DropdownButton>
+      <p>{message}</p>
+    </>
+  );
+};

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

@@ -0,0 +1,113 @@
+import { FC, useState, useEffect, ReactElement, useRef } from 'react';
+import { useOutsideAlerter } from '../../../hooks';
+import { MdChevronRight as ArrowIcon } from 'react-icons/md';
+import { ActionMenu } from '../../../components';
+import { styled } from '../../../styled';
+import { useFloating } from '@floating-ui/react';
+
+const Arrow = styled(ArrowIcon)`
+  transform: rotate(90deg);
+  fill: ${({ theme }) => theme.colors.secondary};
+`;
+
+const Wrapper = styled.div``;
+
+const DropdownActionContainer = styled.div<{ isVisible: boolean }>`
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.spacing['0_5']} 0`};
+  justify-content: center;
+  cursor: pointer;
+  width: 3.2rem;
+  border: .1rem solid ${({ theme, isVisible }) => (isVisible ? theme.colors.primary : theme.colors.backgroundAccent)}};
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.small}};
+  border-bottom-right-radius: ${({ theme }) => theme.borderRadius.small}};
+  
+
+  &:hover {
+    border-color:${({ theme }) => theme.colors.primary};
+    svg {
+      fill: ${({ theme }) => theme.colors.primary};
+    }
+  }
+  &:active {
+    background-color: transparent;
+  }
+`;
+
+const CurrentAction = styled.div`
+  padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing[1]}`};
+  font-weight: 500;
+  cursor: pointer;
+  min-width: 10rem;
+  height: 100%;
+  color: ${({ theme }) => theme.colors.text};
+  border-top: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-left: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius.small};
+  border-bottom-left-radius: ${({ theme }) => theme.borderRadius.small};
+
+  text-align: center;
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+  &:active {
+    background-color: transparent;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  width: max-content;
+
+  &:hover ${DropdownActionContainer} {
+    border-left-color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+export interface DropdownButtonProps {
+  children: ReactElement[];
+}
+
+export const DropdownButton: FC<DropdownButtonProps> = ({ children }) => {
+  const [visible, setVisible] = useState<boolean>(false);
+  const [selected, setSelected] = useState<number>(0);
+  const { x, y, refs, strategy } = useFloating();
+
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  useOutsideAlerter(parentRef, () => {
+    setVisible(false);
+  });
+
+  useEffect(() => {
+    setVisible(false);
+  }, [selected]);
+
+  const handleSelectedActionClicked = () => {
+    setVisible(false);
+    children[selected].props.onClick();
+  };
+
+  return (
+    <Wrapper ref={parentRef}>
+      <Container ref={refs.setReference}>
+        <CurrentAction onClick={handleSelectedActionClicked}>{children[selected].props.text}</CurrentAction>
+        <DropdownActionContainer onClick={() => setVisible(!visible)} isVisible={visible}>
+          <Arrow size={20} />
+        </DropdownActionContainer>
+        {visible && (
+          <ActionMenu selectedState={[selected, setSelected]} attributes={{ x, y, strategy }} ref={refs.setFloating}>
+            {children}
+          </ActionMenu>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Tooltip, IconButton, IconButtonProps } from '../../../components';
+import { styled } from '../../../styled';
+import { AiOutlineBell as Icon } from 'react-icons/ai';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+`;
+
+interface ExtraIconButtonStoryProps {
+  tooltipLabel: string;
+}
+
+export default {
+  title: 'Actions/IconButton',
+  component: IconButton,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    size: 'medium',
+    color: 'primary',
+    icon: <Icon />,
+    tooltipLabel: 'This is the tooltip',
+    badge: '5',
+  },
+} as Meta<IconButtonProps & ExtraIconButtonStoryProps>;
+
+export const Default: StoryFn<IconButtonProps & ExtraIconButtonStoryProps> = (args) => (
+  <Tooltip>
+    <Tooltip.Trigger asChild>
+      <IconButton size={args.size} color={args.color} icon={args.icon} ariaLabel={args.tooltipLabel} />
+    </Tooltip.Trigger>
+    <Tooltip.Content>{args.tooltipLabel}</Tooltip.Content>
+  </Tooltip>
+);
+
+export const Badge: StoryFn<IconButtonProps & ExtraIconButtonStoryProps> = (args) => (
+  <Tooltip>
+    <Tooltip.Trigger asChild>
+      <IconButton
+        badge={args.badge}
+        size={args.size}
+        color={args.color}
+        icon={args.icon}
+        ariaLabel={args.tooltipLabel}
+      />
+    </Tooltip.Trigger>
+    <Tooltip.Content>{args.tooltipLabel}</Tooltip.Content>
+  </Tooltip>
+);

package/src/components/actions/IconButton/IconButton.test.tsx

@@ -0,0 +1,7 @@
+import { IconButton } from '.';
+import { render } from 'test-utils';
+
+it('Should render <IconButton />', () => {
+  const { container } = render(<IconButton icon={<div>icon</div>} />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/actions/IconButton/IconButton.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <IconButton /> 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1) 0s;
+  transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1) 0s;
+  background-color: #664DE5;
+  border-radius: 1rem;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  cursor: pointer;
+  padding: 12px;
+}
+
+.c0 svg {
+  cursor: pointer;
+}
+
+.c0 svg path {
+  fill: #ffffff!important;
+  stroke: #ffffff!important;
+}
+
+<div>
+  <button
+    class="c0"
+    color="primary"
+  >
+    <div>
+      icon
+    </div>
+  </button>
+</div>
+`;