@takaro/lib-components 0.0.1

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/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)} text="open tooltip on, I am the trigger" />
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+import { forwardRef, HTMLProps } from 'react';
+import { useMergeRefs, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import { useTooltipContext } from './TooltipContext';
+import { Elevation, styled } from '../../../styled';
+import { useTheme } from '../../../hooks';
+
+const Container = styled.div<{ elevation: Elevation }>`
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  box-shadow: ${({ theme, elevation }) => theme.elevation[elevation]};
+  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>>(({ style, ...props }, propRef) => {
+  const theme = useTheme();
+  const { floatingStyles, open, arrowRef, context, getFloatingProps } = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!open) return null;
+
+  return (
+    <FloatingPortal>
+      <Container
+        elevation={1}
+        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>(
+  ({ 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;

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

@@ -0,0 +1,79 @@
+import { useState, useMemo, useRef } from 'react';
+
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  Placement,
+  arrow,
+} from '@floating-ui/react';
+
+export interface TooltipOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useTooltip({
+  initialOpen = false,
+  placement = 'top',
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: TooltipOptions = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const arrowRef = useRef(null);
+
+  const ARROW_HEIGHT = 7;
+  const GAP = 2;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(ARROW_HEIGHT + GAP),
+      flip({
+        crossAxis: placement.includes('-'),
+        fallbackAxisSideDirection: 'start',
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const context = data.context;
+
+  const interactions = useInteractions([
+    useHover(context, { move: false, enabled: controlledOpen == null }),
+    useFocus(context, { enabled: controlledOpen == null }),
+    useDismiss(context),
+    useRole(context, { role: 'tooltip' }),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      arrowRef,
+      ...interactions,
+      ...data,
+    }),
+    [open, setOpen, interactions, data]
+  );
+}

package/src/components/feedback/index.ts

@@ -0,0 +1,33 @@
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
+
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+
+export { Loading, Spinner } from './Loaders';
+export type { SpinnerProps } from './Loaders/Spinner';
+export type { LoadingProps } from './Loaders/Loading';
+
+export { NetworkDetector } from './NetworkDetector';
+
+export { NotificationBanner } from './NotificationBanner';
+export type { NotificationBannerProps } from './NotificationBanner';
+
+export { ErrorFallback } from './ErrorFallback';
+
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+
+export { QuestionTooltip } from './QuestionTooltip';
+
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+
+export { ErrorPage } from './ErrorPage';
+export type { ErrorPageProps } from './ErrorPage';
+
+export { FormError } from './FormError';
+export type { FormErrorProps } from './FormError';

package/src/components/feedback/snacks/CookieConsent/index.tsx

@@ -0,0 +1,122 @@
+import { FC, forwardRef, useState, useMemo } from 'react';
+import { CustomContentProps, useSnackbar } from 'notistack';
+import {
+  Container,
+  ButtonContainer,
+  CookieTypeContainer,
+  NecessaryCookieContainer,
+  Wrapper,
+  ActionContainer,
+} from './style';
+import { Button, Switch } from '../../..';
+import { Control, SubmitHandler, useForm, useWatch } from 'react-hook-form';
+import { AiOutlineDown as Arrow } from 'react-icons/ai';
+import { FaCookieBite as CookieBite } from 'react-icons/fa';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+type FormInputs = {
+  functional: boolean;
+  analytical: boolean;
+};
+
+export const CookieConsentSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id }, ref) => {
+  const { closeSnackbar } = useSnackbar();
+  const [showDetails, setShowDetails] = useState<boolean>(false);
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        functional: z.boolean(),
+        analytical: z.boolean(),
+      }),
+    []
+  );
+
+  const onSubmit: SubmitHandler<FormInputs> = async () => {
+    // TODO: send data to backend
+    //const response = await fetch('', { method: 'POST', body: JSON.stringify({ analytical, functional }) });
+    closeSnackbar(id);
+  };
+
+  const { control, handleSubmit } = useForm<FormInputs>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema),
+  });
+
+  const functionalValue = useWatch({ control, name: 'functional' });
+  const analyticalValue = useWatch({ control, name: 'analytical' });
+
+  return (
+    <Wrapper ref={ref}>
+      <h2>
+        Cookies <CookieBite size={24} />
+      </h2>
+      <p>
+        I know, I know, its annoying. But we need to get through this! We only use cookies to guarantee you the best
+        experience on our website.
+      </p>
+
+      <ActionContainer
+        active={showDetails}
+        onClick={() => {
+          setShowDetails(!showDetails);
+        }}
+      >
+        customize <Arrow size={18} />
+      </ActionContainer>
+      <NecessaryCookieContainer>
+        <p>Strictly necessary cookies</p>
+        <p>Always on</p>
+      </NecessaryCookieContainer>
+      <Container isVisible={showDetails}>
+        <form id="cookie-consent" onSubmit={handleSubmit(onSubmit)}>
+          <CookieType
+            control={control}
+            description="We will remember the basics such as language."
+            cookieType="functional"
+            value={functionalValue}
+          />
+          <CookieType
+            control={control}
+            description="We will know where we should improve your experience."
+            cookieType="analytical"
+            value={analyticalValue}
+          />
+        </form>
+      </Container>
+      <div>
+        {' '}
+        Read the{' '}
+        <strong>
+          <a className="underline" href="https://takaro.io/cookie-policy" rel="noopener noreferrer" target="_blank">
+            cookie policy.
+          </a>
+        </strong>
+      </div>
+      <ButtonContainer>
+        <Button text="Decline" />
+        <Button text="Accept" type="submit" />
+      </ButtonContainer>
+    </Wrapper>
+  );
+});
+
+interface CookieTypeProps {
+  cookieType: string;
+  description: string;
+  control: Control<FormInputs>;
+  value: boolean;
+}
+
+const CookieType: FC<CookieTypeProps> = ({ cookieType, description, control, value }) => {
+  return (
+    <CookieTypeContainer active={value}>
+      <div>
+        <h4>{cookieType} cookies</h4>
+        <p>{description}</p>
+      </div>
+      <Switch control={control} name={cookieType} />
+    </CookieTypeContainer>
+  );
+};

package/src/components/feedback/snacks/CookieConsent/style.ts

@@ -0,0 +1,100 @@
+import { styled } from '../../../../styled';
+import { lighten } from 'polished';
+
+export const Wrapper = styled.div`
+  border: 0.1rem solid ${({ theme }) => theme.colors.primary};
+  padding: ${({ theme }) => theme.spacing['1_5']};
+  max-width: 450px;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  box-shadow: ${({ theme }) => theme.elevation[4]};
+
+  & > p {
+    margin-top: ${({ theme }) => theme.spacing[1]};
+    margin-bottom: ${({ theme }) => theme.spacing[1]};
+    font-size: 110%;
+  }
+
+  a {
+    text-decoration: underline;
+    color: ${({ theme }) => theme.colors.primary};
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  h2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    svg {
+      fill: ${({ theme }) => theme.colors.secondary};
+    }
+  }
+`;
+
+export const Container = styled.div<{ isVisible: boolean }>`
+  overflow: ${({ isVisible }): string => (isVisible ? 'visible' : 'hidden')};
+  height: ${({ isVisible }) => (isVisible ? 'auto' : '0')};
+  /* todo fix height change animation */
+  transition: height 0.2s ease-in-out;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing[2]};
+
+  button:last-child {
+    margin-left: ${({ theme }) => theme.spacing[1]};
+  }
+`;
+
+export const ActionContainer = styled.div<{ active: boolean }>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: ${({ theme }) => theme.spacing[1]};
+  font-weight: 600;
+
+  svg {
+    margin-left: ${({ theme }) => theme.spacing['0_5']};
+    ${({ active }): string => (active ? 'transform: rotate(180deg)' : '')};
+    transition: transform 0.2s ease-in-out;
+  }
+`;
+
+export const CookieTypeContainer = styled.div<{ active: boolean }>`
+  border: 0.1rem solid ${({ theme }) => theme.colors.primary};
+  margin: ${({ theme }) => `${theme.spacing[1]} 0`};
+  padding: ${({ theme }) => `${theme.spacing[1]} ${theme.spacing[2]} ${theme.spacing[1]} ${theme.spacing[1]}`};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  will-change: background-color;
+
+  h4 {
+    font-weight: 600;
+  }
+
+  div:first-child {
+    margin-left: ${({ theme }) => theme.spacing[1]};
+  }
+`;
+export const NecessaryCookieContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  padding: ${({ theme }) => `${theme.spacing['1_5']} ${theme.spacing[2]}`};
+  margin-bottom: ${({ theme }) => theme.spacing[1]};
+  background-color: ${({ theme }) => lighten(0, theme.colors.primary)};
+
+  p {
+    color: white;
+  }
+`;