@takaro/lib-components 0.0.0-next.0da151e

package/src/components/feedback/Popover/PopoverTrigger.tsx

@@ -0,0 +1,45 @@
+import { forwardRef, cloneElement, isValidElement, HTMLProps, PropsWithChildren } from 'react';
+import { usePopoverContext } from './PopoverContext';
+import { useMergeRefs } from '@floating-ui/react';
+import { ReactNode } from '@tanstack/react-router';
+
+export type PopoverTriggerProps = HTMLProps<HTMLElement> &
+  PropsWithChildren<{
+    asChild?: boolean;
+  }>;
+
+export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(function PopoverTrigger(
+  { children, asChild = false, ...props },
+  propRef,
+) {
+  const context = usePopoverContext();
+  const childrenRef = (children as ReactNode).ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && isValidElement(children)) {
+    return cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        'data-state': context.open ? 'open' : 'closed',
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+      }),
+    );
+  }
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      // The user can style the trigger based on the state
+      data-state={context.open ? 'open' : 'closed'}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </button>
+  );
+});

package/src/components/feedback/Popover/index.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren, FC } from 'react';
+import { PopoverOptions, usePopover } from './usePopover';
+import { PopoverContext } from './PopoverContext';
+import { PopoverTrigger } from './PopoverTrigger';
+import { PopoverContent } from './PopoverContent';
+
+interface SubComponents {
+  Trigger: typeof PopoverTrigger;
+  Content: typeof PopoverContent;
+}
+
+export type PopoverProps = PropsWithChildren<PopoverOptions>;
+
+export const Popover: FC<PopoverProps> & SubComponents = ({ children, modal = false, ...restOptions }) => {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({ modal, ...restOptions });
+  return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;
+};
+
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;

package/src/components/feedback/Popover/usePopover.tsx

@@ -0,0 +1,87 @@
+import { useState, useMemo, useRef } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  Placement,
+  arrow,
+} from '@floating-ui/react';
+
+export interface PopoverOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  /// If focus is modal, focus is trapped inside the floating element and outside content cannot be accessed.
+  /// When set, the floating element should have a dedicated close button.
+  modal?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function usePopover({
+  initialOpen = false,
+  placement = 'bottom',
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: PopoverOptions = {}) {
+  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 arrowRef = useRef(null);
+  const ARROW_HEIGHT = 7;
+  const GAP = 7;
+
+  const { context, ...data } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({
+        crossAxis: placement.includes('-'),
+        fallbackAxisSideDirection: 'end',
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const interactions = useInteractions([
+    useClick(context, {
+      enabled: controlledOpen == null,
+    }),
+    useDismiss(context),
+    useRole(context),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      context,
+      ...data,
+      modal,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      arrowRef,
+    }),
+    [open, setOpen, interactions, data, modal, labelId, descriptionId],
+  );
+}

package/src/components/feedback/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+import { ProgressBar, ProgressBarProps } from '.';
+import { styled } from '../../../styled';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing[1]};
+`;
+
+export default {
+  title: 'Feedback/ProgressBar',
+  component: ProgressBar,
+  args: {
+    mode: 'indeterminate',
+    showPercentage: false,
+  },
+} as Meta<ProgressBarProps>;
+
+export const Default: StoryFn<ProgressBarProps> = (args) => {
+  const [value, setValue] = useState<number>(0);
+
+  return (
+    <>
+      <ProgressBar {...args} value={value} />
+
+      {args.mode === 'determinate' && (
+        <ButtonContainer>
+          <button onClick={() => setValue(value - 10)}>-10</button>
+          <button onClick={() => setValue(value - 5)}>-5</button>
+          <button onClick={() => setValue(value + 5)}>+5</button>
+          <button onClick={() => setValue(value + 10)}>+10</button>
+        </ButtonContainer>
+      )}
+    </>
+  );
+};

package/src/components/feedback/ProgressBar/index.tsx

@@ -0,0 +1,137 @@
+import { FC } from 'react';
+import { shade } from 'polished';
+import { styled, Color as C, Size } from '../../../styled';
+import { keyframes } from 'styled-components';
+import { AlertVariants } from '../Alert';
+
+type Color = C | AlertVariants;
+
+const indeterminateAnimation = keyframes`
+  0% {
+    transform:  translateX(0) scaleX(0);
+  }
+  40% {
+    transform:  translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform:  translateX(100%) scaleX(0.5);
+  }
+`;
+
+const IndeterminateProgress = styled.div<{ color: Color }>`
+  width: 100%;
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  height: 1rem;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  overflow: hidden;
+  will-change: translateX, scaleX;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    top: 1px;
+    height: calc(100% - 4px);
+    background-color: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+    border: 1px solid ${({ theme, color }) => theme.colors[color]};
+    animation: ${indeterminateAnimation} 5s infinite linear;
+    transform-origin: 0% 50%;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+`;
+const Progress = styled.div<{ color: Color; progress: number; size: Size }>`
+  width: 100%;
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  height: ${({ theme, size }) => {
+    switch (size) {
+      case 'tiny':
+        return theme.spacing['0_5'];
+      case 'small':
+        return theme.spacing['0_75'];
+      case 'medium':
+        return theme.spacing['1_5'];
+      case 'large':
+        return theme.spacing['2_5'];
+      case 'huge':
+        return theme.spacing['4'];
+    }
+  }};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  overflow: hidden;
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: ${({ progress }) => progress}%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    height: ${({ theme, size }) => {
+      switch (size) {
+        case 'tiny':
+          return theme.spacing['0_5'];
+        case 'small':
+          return theme.spacing['0_75'];
+        case 'medium':
+          return theme.spacing['1_5'];
+        case 'large':
+          return theme.spacing['2_5'];
+        case 'huge':
+          return theme.spacing['4'];
+      }
+    }};
+    max-width: 100%;
+    transition: 0.2s width ease-out;
+    background-color: ${({ theme, color }) => theme.colors[color]};
+  }
+`;
+
+const Label = styled.div`
+  margin-left: ${({ theme }) => theme.spacing[1]};
+`;
+
+export interface ProgressBarProps {
+  mode: 'determinate' | 'indeterminate';
+  value?: number;
+  color?: Color;
+  showPercentage?: boolean;
+  size?: Size;
+  /// To make the progressbar a bit more visually pleasing, you can set a minimum fill value.
+  /// If the actual value is below this value, the progressbar will still show the minimum fill value.
+  minFill?: number;
+}
+
+export const ProgressBar: FC<ProgressBarProps> = ({
+  mode,
+  value = 0,
+  color = 'primary',
+  showPercentage = false,
+  size = 'medium',
+  minFill = 0,
+}) => {
+  if (mode === 'determinate') {
+    return (
+      <Container>
+        <Progress color={color} progress={value > minFill ? value : value == 0 ? 0 : minFill} size={size} />
+        {showPercentage && <Label>{Math.max(0, Math.min(value, 100))}%</Label>}
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <IndeterminateProgress color={color} />
+    </Container>
+  );
+};

package/src/components/feedback/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Skeleton, SkeletonProps } from '.';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing['1']};
+`;
+
+export default {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+} as Meta<SkeletonProps>;
+
+export const Default: StoryFn<SkeletonProps> = (args) => <Skeleton {...args} />;
+
+export const Example = () => (
+  <Wrapper>
+    <Skeleton variant="text" />
+    <Skeleton height="40px" variant="circular" width="40px" />
+    <Skeleton height="180px" variant="rectangular" width="210px" />
+  </Wrapper>
+);
+
+export const Example2 = () => (
+  <Wrapper>
+    <Skeleton variant="text" />
+    <Skeleton variant="text" />
+    <Skeleton variant="text" />
+  </Wrapper>
+);

package/src/components/feedback/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,8 @@
+import { Skeleton } from '.';
+import { it, expect } from 'vitest';
+import { render } from '../../../test/testUtils';
+
+it('Should render <Skeleton/>', () => {
+  const { container } = render(<Skeleton variant="rectangular" />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/feedback/Skeleton/Skeleton.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Skeleton/> 1`] = `
+.c0 {
+  width: 210px;
+  height: 20px;
+  margin: 10px 0;
+  overflow: hidden;
+  position: relative;
+  background-color: #f5f5f5;
+  border-radius: 1rem;
+}
+
+.c0::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+  background-image: linear-gradient( 90deg, #ffffffd3 0, #ffffff4d 20%, #ffffff66 60%, #ffffffd3 );
+  -webkit-animation: cTtZmo 2.5s infinite ease-in-out;
+  animation: cTtZmo 2.5s infinite ease-in-out;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;

package/src/components/feedback/Skeleton/__snapshots__/Skeleton.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Skeleton/> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg VRVWh"
+  />
+</div>
+`;

package/src/components/feedback/Skeleton/index.tsx

@@ -0,0 +1,62 @@
+import { FC } from 'react';
+import { styled } from '../../../styled';
+import { keyframes } from 'styled-components';
+
+export interface SkeletonProps {
+  width?: string;
+  height?: string;
+  variant: Variants;
+}
+
+type Variants = 'text' | 'circular' | 'rectangular';
+
+const skeletonLoading = keyframes`
+  0% { transform: translateX(-100%); }
+  40%, 100% { transform: translateX(100%); }
+`;
+
+const StyledDiv = styled.div<{
+  variant: Variants;
+  s_height: string;
+  s_width: string;
+}>`
+  width: ${({ s_width }) => s_width};
+  height: ${({ s_height }) => s_height};
+  overflow: hidden;
+  position: relative;
+
+  background-color: ${({ theme }): string => theme.colors.placeholder};
+  &::before {
+    content: '';
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      ${({ theme }): string => theme.colors.placeholderHighlight}d3 0,
+      ${({ theme }): string => theme.colors.placeholderHighlight}4d 20%,
+      ${({ theme }): string => theme.colors.placeholderHighlight}66 60%,
+      ${({ theme }): string => theme.colors.placeholderHighlight}d3
+    );
+    animation: ${skeletonLoading} 2.5s infinite ease-in-out;
+  }
+
+  border-radius: ${({ variant }) => {
+    switch (variant) {
+      case 'rectangular':
+        return '1rem';
+      case 'text':
+        return '3px';
+      case 'circular':
+        return '50%';
+    }
+  }};
+`;
+
+export const Skeleton: FC<SkeletonProps> = ({ width = '210px', height = '20px', variant }) => {
+  return <StyledDiv s_height={height} s_width={width} variant={variant} />;
+};

package/src/components/feedback/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Tooltip, TooltipProps } from '.';
+import { Button, IconButton } from '../../actions';
+import { AiOutlineWoman as Icon } from 'react-icons/ai';
+
+interface ExtraTooltipStoryProps {
+  label: string;
+}
+
+export default {
+  title: 'Feedback/Tooltip',
+  component: Tooltip,
+  args: {
+    placement: 'bottom',
+    label: 'this is the tooltip content',
+  },
+} as Meta<TooltipProps & ExtraTooltipStoryProps>;
+
+export const Default: StoryFn<TooltipProps & ExtraTooltipStoryProps> = (args) => (
+  <>
+    By default the tooltip is rendered in a div tag. This is because the tooltip component needs a ref to the trigger
+    element. If you want to render the tooltip in a different element, you can use the asChild prop.
+    <Tooltip placement={args.placement}>
+      <Tooltip.Trigger asChild>trigger</Tooltip.Trigger>
+      <Tooltip.Content>{args.label}</Tooltip.Content>
+    </Tooltip>
+  </>
+);
+
+export const UnControlled: StoryFn<TooltipProps & ExtraTooltipStoryProps> = (args) => (
+  <Tooltip placement={args.placement}>
+    <Tooltip.Trigger asChild>
+      <span>trigger</span>
+    </Tooltip.Trigger>
+    <Tooltip.Content>{args.label}</Tooltip.Content>
+  </Tooltip>
+);
+
+export const UnControlledCustomChild: StoryFn<TooltipProps & ExtraTooltipStoryProps> = (args) => (
+  <>
+    By default the component is rendered in a div tag. because the component is expected to have a ref. So if the
+    component you want to render as the trigger does not have a ref, you can NOT set the asChild prop. By setting the
+    asChild prop, the component will be rendered as the trigger component.
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <IconButton icon={<Icon />} ariaLabel="aria label here" />
+      </Tooltip.Trigger>
+      <Tooltip.Content>{args.label}</Tooltip.Content>
+    </Tooltip>
+  </>
+);
+
+export const Controlled: StoryFn<TooltipProps & ExtraTooltipStoryProps> = () => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      A controlled open means that the child component is responsible for opening and closing the tooltip. Which is e.g.
+      useful when you want to open the tooltip on click instead of hover. or when you want to open a tooltip on a
+      different component than the trigger.
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <Tooltip.Trigger asChild>I am the trigger</Tooltip.Trigger>
+        <Tooltip.Content>controlled tooltip</Tooltip.Content>
+      </Tooltip>
+      <Button onClick={() => setOpen(true)}>open tooltip on, I am the trigger</Button>
+    </>
+  );
+};

package/src/components/feedback/Tooltip/TooltipContent.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, HTMLProps } from 'react';
+import { useMergeRefs, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { useTooltipContext } from './TooltipContext';
+import { styled } from '../../../styled';
+import { useTheme } from '../../../hooks';
+
+const Container = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  pointer-events: none;
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAlt};
+  padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing['0_75']}`};
+  font-size: 1.4rem;
+  width: max-content;
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
+`;
+
+export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function TooltipContent(
+  { style, ...props },
+  propRef,
+) {
+  const theme = useTheme();
+  const { floatingStyles, open, arrowRef, context, getFloatingProps, disabled } = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!open || disabled) return null;
+
+  return (
+    <FloatingPortal>
+      <Container
+        ref={ref}
+        style={{
+          ...floatingStyles,
+          ...style,
+          border: `1px solid ${theme.colors.backgroundAccent}`,
+        }}
+        {...getFloatingProps(props)}
+      >
+        {props.children}
+        <FloatingArrow
+          ref={arrowRef}
+          context={context}
+          fill={theme.colors.background}
+          stroke={theme.colors.backgroundAccent}
+          strokeWidth={1}
+        />
+      </Container>
+    </FloatingPortal>
+  );
+});

package/src/components/feedback/Tooltip/TooltipContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { useTooltip } from './useTooltip';
+
+type ContextType = ReturnType<typeof useTooltip> | null;
+export const TooltipContext = createContext<ContextType>(null);
+
+export const useTooltipContext = () => {
+  const context = useContext(TooltipContext);
+  if (context == null) {
+    throw new Error('Tooltip components must be wrapped in <Tooltip />');
+  }
+  return context;
+};

package/src/components/feedback/Tooltip/TooltipTrigger.tsx

@@ -0,0 +1,39 @@
+import { HTMLProps, forwardRef, isValidElement, cloneElement } from 'react';
+import { useTooltipContext } from './TooltipContext';
+import { useMergeRefs } from '@floating-ui/react';
+import { styled } from '../../../styled';
+
+const Container = styled.div<{ isOpen: boolean }>`
+  width: fit-content;
+`;
+
+interface TooltipTriggerProps {
+  asChild?: boolean;
+}
+
+export const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TooltipTriggerProps>(
+  function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
+    const context = useTooltipContext();
+    const childrenRef = (children as any).ref;
+    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+    // `asChild` allows the user to pass any element as the anchor
+    if (asChild && isValidElement(children)) {
+      return cloneElement(
+        children,
+        context.getReferenceProps({
+          ...props,
+          ...children.props,
+          ref,
+          'data-state': context.open ? 'open' : 'closed',
+        }),
+      );
+    }
+
+    return (
+      <Container ref={ref} isOpen={context.open} {...context.getReferenceProps(props)}>
+        {children}
+      </Container>
+    );
+  },
+);

package/src/components/feedback/Tooltip/index.tsx

@@ -0,0 +1,26 @@
+import { FC, PropsWithChildren } from 'react';
+import { TooltipOptions, useTooltip } from './useTooltip';
+import { TooltipContext } from './TooltipContext';
+import { TooltipTrigger } from './TooltipTrigger';
+import { TooltipContent } from './TooltipContent';
+
+/*
+ * tooltip is the wrapper component that provides the context
+ * trigger is the component that triggers the tooltip to open (the thing you hover over)
+ * content is the component that is rendered inside the tooltip
+ */
+interface SubComponentTypes {
+  Trigger: typeof TooltipTrigger;
+  Content: typeof TooltipContent;
+}
+export type TooltipProps = PropsWithChildren<TooltipOptions>;
+
+export const Tooltip: FC<TooltipProps> & SubComponentTypes = ({ children, ...options }) => {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const tooltip = useTooltip(options);
+  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
+};
+
+Tooltip.Trigger = TooltipTrigger;
+Tooltip.Content = TooltipContent;