@takaro/lib-components 0.0.1

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

@@ -0,0 +1,41 @@
+import { FC, useEffect } from 'react';
+import { useSnackbar } from 'notistack';
+
+export const NetworkDetector: FC = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  // const [current, setCurrent] = useState();
+
+  function hasNetwork(online: boolean) {
+    if (online) {
+      enqueueSnackbar('Your network is back online!', {
+        variant: 'networkDetectorOnline',
+        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+      });
+    } else {
+      // offline
+      // TODO: make this persistent, with custom button and custom child
+      enqueueSnackbar('You are currently offline.', {
+        variant: 'networkDetectorOffline',
+        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+        persist: true,
+      });
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('offline', () => hasNetwork(false));
+    window.addEventListener('online', () => hasNetwork(true));
+
+    // clean up
+    return () => {
+      window.removeEventListener('online', () => {
+        /* */
+      });
+      window.removeEventListener('offline', () => {
+        /* */
+      });
+    };
+  }, []);
+
+  return null;
+};

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

@@ -0,0 +1,13 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { NotificationBanner, NotificationBannerProps } from '.';
+
+export default {
+  title: 'Feedback/NotificationBanner',
+  component: NotificationBanner,
+  args: {
+    title: 'This is the notification banner title',
+    description: 'This is the notification banner description',
+  },
+} as Meta<NotificationBannerProps>;
+
+export const Default: StoryFn<NotificationBannerProps> = (args) => <NotificationBanner {...args} />;

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

@@ -0,0 +1,14 @@
+import { NotificationBanner } from '.';
+import { render } from 'test-utils';
+
+it('Should render <NotificationBanner/>', () => {
+  // we need to create the portal
+  const notificationBannerPortal = document.createElement('div');
+  notificationBannerPortal.setAttribute('id', 'notification-banner');
+  document.body.appendChild(notificationBannerPortal);
+
+  const { container } = render(
+    <NotificationBanner description="Notification banner description" title="Notification banner title" />
+  );
+  expect(container).toMatchSnapshot();
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <NotificationBanner/> 1`] = `<div />`;

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

@@ -0,0 +1,79 @@
+import { FC, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Elevation, styled } from '../../../styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Tooltip } from '../Tooltip';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+
+const Container = styled(motion.div)<{ $elevation: Elevation }>`
+  position: sticky;
+  background-color: ${({ theme }): string => theme.colors.primaryShade};
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  will-change: height;
+  overflow: hidden;
+  box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
+  z-index: ${({ theme }) => theme.zIndex.notificationBanner};
+
+  div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+  p {
+    font-size: 1.1rem;
+  }
+
+  h3,
+  p {
+    color: white;
+    font-weight: 500;
+  }
+  svg {
+    fill: white;
+    cursor: pointer;
+  }
+`;
+
+export interface NotificationBannerProps {
+  title: string;
+  description: string;
+  elevation?: Elevation;
+}
+
+/* What is <NotificationBanner?
+  ------------------------------
+  It is a sticky component that shows above the headerbar to show a notification and
+  can be hidden by clicking the X in the upper right corner.
+  IMPORTANT: the component requires a separate div mounted outside of root called with id notification-banner. 
+*/
+
+export const NotificationBanner: FC<NotificationBannerProps> = ({ title, description, elevation = 4 }) => {
+  const [visible, setVisible] = useState<boolean>(true);
+
+  return createPortal(
+    <AnimatePresence>
+      {visible && (
+        <Container $elevation={elevation} initial={{ y: -40 }} animate={{ y: 0 }} exit={{ opacity: '0' }}>
+          <div>
+            <h3>{title}</h3>
+            <p>{description}</p>
+          </div>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <CloseIcon onClick={() => setVisible(false)} size={18} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Close</Tooltip.Content>
+          </Tooltip>
+        </Container>
+      )}
+    </AnimatePresence>,
+    document.querySelector('#notification-banner') as Element
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Popover, PopoverProps } from '.';
+import { IconButton } from '../../actions';
+import { AiFillBug as BugIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Feedback/Popover',
+  component: Popover,
+  args: {
+    placement: 'bottom',
+  },
+} as Meta<PopoverProps>;
+
+export const UnControlled: StoryFn<PopoverProps> = () => (
+  <Popover>
+    <Popover.Trigger>Click this to open it in the popover</Popover.Trigger>
+    <Popover.Content>this is the content of the popover</Popover.Content>
+  </Popover>
+);
+
+export const CustomTrigger: StoryFn<PopoverProps> = () => (
+  <>
+    By default trigger is rendered as a button, but you can pass any component as a trigger by setting the asChild prop
+    on the Popover.Trigger component.
+    <Popover>
+      <Popover.Trigger asChild>
+        <IconButton icon={<BugIcon />} ariaLabel="click me" />
+      </Popover.Trigger>
+      <Popover.Content>this is the content of the popover</Popover.Content>
+    </Popover>
+  </>
+);

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

@@ -0,0 +1,43 @@
+import { forwardRef, HTMLProps } from 'react';
+import { useMergeRefs, FloatingPortal, FloatingFocusManager, FloatingArrow } from '@floating-ui/react';
+import { usePopoverContext } from './PopoverContext';
+import { styled } from '../../../styled';
+import { useTheme } from '../../../hooks';
+
+const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+`;
+
+export const PopoverContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ style, ...props }, propRef) => {
+  const theme = useTheme();
+  const { context: floatingContext, arrowRef, ...context } = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal>
+      <FloatingFocusManager context={floatingContext} modal={context.modal}>
+        <Container
+          ref={ref}
+          style={{ ...context.floatingStyles, ...style }}
+          aria-labelledby={context.labelId}
+          aria-describedby={context.descriptionId}
+          {...context.getFloatingProps(props)}
+        >
+          {props.children}
+          <FloatingArrow
+            ref={arrowRef}
+            context={floatingContext}
+            fill={theme.colors.background}
+            stroke={theme.colors.backgroundAccent}
+            style={{ transform: 'translateY(-1px)' }}
+            strokeWidth={1}
+          />
+        </Container>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});

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

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

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

@@ -0,0 +1,43 @@
+import { forwardRef, cloneElement, isValidElement, HTMLProps, PropsWithChildren } from 'react';
+import { usePopoverContext } from './PopoverContext';
+import { useMergeRefs } from '@floating-ui/react';
+
+export type PopoverTriggerProps = HTMLProps<HTMLElement> &
+  PropsWithChildren<{
+    asChild?: boolean;
+  }>;
+
+export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = usePopoverContext();
+    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({
+          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 { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+import { ProgressBar, ProgressBarProps } from '.';
+import { styled } from '../../../styled';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  button {
+    &:first-child {
+      margin: 0 1rem;
+    }
+  }
+`;
+
+export default {
+  title: 'Feedback/ProgressBar',
+  component: ProgressBar,
+  args: {
+    mode: 'indeterminate',
+    showValue: false,
+  },
+} as Meta<ProgressBarProps>;
+
+export const Default: StoryFn<ProgressBarProps> = (args) => <ProgressBar {...args} />;
+
+export const Determinate: StoryFn<ProgressBarProps> = () => {
+  const [value, setValue] = useState<number>(0);
+
+  return (
+    <>
+      <ProgressBar mode="determinate" showValue value={value} />
+      <ButtonContainer>
+        <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,103 @@
+import { FC } from 'react';
+import { styled, Color } from '../../../styled';
+import { darken } from 'polished';
+import { keyframes } from 'styled-components';
+
+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%;
+    height: 100%;
+    background-color: ${({ theme, color }) => theme.colors[color]};
+    animation: ${indeterminateAnimation} 5s infinite linear;
+    transform-origin: 0% 50%;
+    border-radius: ${({ theme }) => theme.borderRadius.large};
+    background-color: ${({ theme, color }) => theme.colors[color]};
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing[1]};
+`;
+const Progress = styled.div<{ color: Color; progress: number }>`
+  width: calc(100% - 50px);
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  height: ${({ theme }) => theme.spacing[1]};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  overflow: hidden;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: ${({ progress }) => progress}%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    height: ${({ theme }) => theme.spacing[1]};
+    max-width: 100%;
+    transition: 0.2s width ease-out;
+    background-color: ${({ theme, color }) => darken(0.2, theme.colors[color])};
+    background-image: ${({ theme, color }): string =>
+      `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23${theme.colors[
+        color
+      ].slice(
+        1,
+        theme.colors[color].length
+      )}' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")`};
+  }
+`;
+
+const Label = styled.div`
+  margin-left: ${({ theme }) => theme.spacing[1]};
+`;
+
+export interface ProgressBarProps {
+  mode: 'determinate' | 'indeterminate';
+  value?: number;
+  color?: Color;
+  showValue?: boolean;
+}
+
+export const ProgressBar: FC<ProgressBarProps> = ({ mode, value = 0, color = 'primary', showValue = false }) => {
+  if (mode === 'determinate') {
+    return (
+      <Container>
+        <Progress color={color} progress={value} />
+        {showValue && <Label>{Math.min(value, 100)}%</Label>}
+      </Container>
+    );
+  }
+
+  return (
+    <Container>
+      <IndeterminateProgress color={color} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { QuestionTooltip } from '.';
+
+export default {
+  title: 'Feedback/QuestionTooltip',
+  component: QuestionTooltip,
+  args: {
+    placement: 'bottom',
+    label: 'this is the tooltip content',
+  },
+} as Meta;
+
+export const Default: StoryFn = () => {
+  return (
+    <div>
+      <QuestionTooltip>this is the tooltip content</QuestionTooltip>
+    </div>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { Tooltip } from '../Tooltip';
+import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
+import { styled } from '../../../styled';
+import { TooltipProps } from '../Tooltip';
+
+const TriggerContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${({ theme }) => theme.spacing['0_5']};
+  margin-right: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+const ContentContainer = styled.div`
+  max-width: 450px;
+  hyphens: auto;
+`;
+
+export const QuestionTooltip: FC<TooltipProps> = ({ children }) => {
+  return (
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <TriggerContainer>
+          <QuestionIcon size="18" />
+        </TriggerContainer>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <ContentContainer>{children}</ContentContainer>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

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,7 @@
+import { Skeleton } from '.';
+import { render } from 'test-utils';
+
+it('Should render <Skeleton/>', () => {
+  const { container } = render(<Skeleton variant="rectangular" />);
+  expect(container).toMatchSnapshot();
+});