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

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

@@ -0,0 +1,82 @@
+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;
+  disabled?: boolean;
+}
+
+export function useTooltip({
+  initialOpen = false,
+  placement = 'top',
+  open: controlledOpen,
+  disabled = false,
+  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,
+      disabled,
+    }),
+    [open, setOpen, interactions, data],
+  );
+}

package/src/components/feedback/index.ts

@@ -0,0 +1,37 @@
+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 { IconTooltip } from './IconTooltip';
+export type { IconTooltipProps } from './IconTooltip';
+
+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';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

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

@@ -0,0 +1,125 @@
+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>(function CookieConsentSnack(
+  { 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>Decline</Button>
+        <Button type="submit">Accept</Button>
+      </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,99 @@
+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};
+
+  & > 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;
+  }
+`;

package/src/components/feedback/snacks/Default/default.stories.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { useSnackbar } from 'notistack';
+import { styled } from '../../../../styled';
+import { Button } from '../../../../components';
+import { DefaultSnackProps } from '.';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+`;
+
+export default {
+  title: 'Feedback/Snacks/Default',
+  parameters: {
+    docs: {
+      inlineStories: false,
+    },
+  },
+  args: {
+    type: 'info',
+    title: 'Update available',
+    message: 'A new software version is available for download.',
+  },
+} as Meta<DefaultSnackProps>;
+
+export const Default: StoryFn<DefaultSnackProps> = (args) => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleOnClick = () => {
+    enqueueSnackbar(args.message, {
+      title: args.title,
+      type: args.type,
+      key: 'software-update',
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Button onClick={handleOnClick}>show snack</Button>
+    </Wrapper>
+  );
+};
+
+export const Buttons: StoryFn<DefaultSnackProps> = (args) => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  const handleOnClick = () => {
+    enqueueSnackbar(args.message, {
+      title: args.title,
+      type: args.type,
+      key: 'software-update',
+      button1: <Button>Update</Button>,
+      button2: (
+        <Button
+          onClick={() => {
+            closeSnackbar('software-update');
+          }}
+          variant="outline"
+        >
+          Not now
+        </Button>
+      ),
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Button onClick={handleOnClick}>show snack</Button>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,78 @@
+import { forwardRef, FC, ReactElement, cloneElement, useCallback } from 'react';
+import { CustomContentProps, useSnackbar } from 'notistack';
+import {
+  AiOutlineClose as CloseIcon,
+  AiOutlineWarning as WarningIcon,
+  AiOutlineInfo as InfoIcon,
+  AiOutlineCheck as CheckMarkIcon,
+  AiOutlineMeh as ErrorIcon,
+} from 'react-icons/ai';
+
+import { Wrapper, ContentContainer, TextContainer, IconContainer, ButtonContainer } from './style';
+import { useTheme } from '../../../../hooks';
+import { ButtonProps, IconButton, Tooltip } from '../../../../components';
+import { AlertVariants } from '../../../../styled';
+
+/* IMPORTANT: These props need to be kept in sync with the props defined in helpers/getSnackbarProvider */
+export interface DefaultSnackProps extends CustomContentProps {
+  title?: string;
+  button1?: FC<ButtonProps>;
+  button2?: FC<ButtonProps>;
+  type?: AlertVariants;
+  icon?: ReactElement;
+}
+
+export const DefaultSnack = forwardRef<HTMLDivElement, DefaultSnackProps>(function DefaultSnack(
+  { id, message, title, button1, button2, type = 'info', icon },
+  ref,
+) {
+  const { closeSnackbar } = useSnackbar();
+  const theme = useTheme();
+
+  const getIcon = () => {
+    switch (type) {
+      case 'info':
+        return <InfoIcon fill={theme.colors.info} size={15} />;
+      case 'success':
+        return <CheckMarkIcon fill={theme.colors.success} size={15} />;
+      case 'warning':
+        return <WarningIcon fill={theme.colors.warning} size={15} />;
+      case 'error':
+        return <ErrorIcon fill={theme.colors.warning} size={15} />;
+    }
+  };
+
+  const handleDismiss = useCallback(() => {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
+
+  return (
+    <Wrapper ref={ref}>
+      <ContentContainer>
+        <IconContainer variant={type}>
+          {icon ? cloneElement(icon, { size: 15, fill: theme.colors[type] }) : getIcon()}
+        </IconContainer>
+        <TextContainer>
+          {title && <h3>{title}</h3>}
+          <h5>{message}</h5>
+          {button1 && (
+            <ButtonContainer>
+              <>
+                {button1}
+                {button2 && button2}
+              </>
+            </ButtonContainer>
+          )}
+        </TextContainer>
+        <div style={{ width: '25px' }}>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <IconButton icon={<CloseIcon />} ariaLabel="Dismiss snack popup" onClick={handleDismiss} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Dismiss</Tooltip.Content>
+          </Tooltip>
+        </div>
+      </ContentContainer>
+    </Wrapper>
+  );
+});

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

@@ -0,0 +1,58 @@
+import { styled } from '../../../../styled';
+import { lighten } from 'polished';
+
+export const Wrapper = styled.div`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  padding: ${({ theme }) =>
+    `${theme.spacing['1']} ${theme.spacing[2]} ${theme.spacing['1_5']} ${theme.spacing['1_5']}`};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 250px;
+  h3 {
+    font-weight: 700;
+    margin-bottom: ${({ theme }) => theme.spacing[1]};
+  }
+  margin-right: ${({ theme }) => theme.spacing[1]};
+`;
+
+export const IconContainer = styled.div<{
+  variant: 'info' | 'warning' | 'success' | 'error';
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing['0_5']};
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  margin-right: ${({ theme }) => theme.spacing[1]};
+  background-color: ${({ variant, theme }): string => lighten(0.3, theme.colors[variant])};
+`;
+
+export const ButtonContainer = styled.div`
+  width: 100%;
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  button {
+    width: 100%;
+    &:first-child {
+      margin-right: ${({ theme }) => theme.spacing['0_5']};
+    }
+  }
+`;

package/src/components/feedback/snacks/Drawer/Drawer.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button } from '../../../';
+import { useSnackbar } from 'notistack';
+import { styled } from '../../../../';
+import { AiFillCheckCircle as CheckMarkIcon } from 'react-icons/ai';
+
+const CustomContent = styled.div`
+  h4 {
+    font-size: 1.2rem;
+  }
+  p {
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 0.5rem;
+    }
+  }
+`;
+
+export default {
+  title: 'Feedback/Snacks/DrawerSnack',
+  component: undefined,
+} as Meta;
+
+export const Downloads: StoryFn = () => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const showSnack = () => {
+    enqueueSnackbar('Report Complete', {
+      autoHideDuration: 20000, // 20s
+      anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+      variant: 'drawer',
+      children: (
+        <CustomContent>
+          <h4>Pdf Ready</h4>
+          <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <CheckMarkIcon /> Download now
+          </p>
+        </CustomContent>
+      ),
+    });
+  };
+
+  return <Button onClick={() => showSnack()}>Show snack</Button>;
+};

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

@@ -0,0 +1,85 @@
+import { CustomContentProps, useSnackbar } from 'notistack';
+import { useState, forwardRef, PropsWithChildren } from 'react';
+import { styled } from '../../../../styled';
+import { AiOutlineClose as CloseIcon, AiOutlineDown as ArrowDownIcon } from 'react-icons/ai';
+import { Tooltip } from '../../../../components';
+
+const Wrapper = styled.div`
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  width: 300px;
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+const Container = styled.div<{ expanded: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 0;
+  background-color: ${({ theme }) => theme.colors.background};
+  padding: ${({ theme }) => theme.spacing[1]};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+
+  ${({ expanded }) => {
+    if (expanded) {
+      return `
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      `;
+    }
+  }}
+  svg {
+    cursor: pointer;
+    padding: ${({ theme }) => `0 ${theme.spacing['0_5']}`};
+  }
+`;
+
+const Content = styled.div<{ expanded: boolean }>`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  height: ${({ expanded }): string => (expanded ? 'auto' : '0')};
+  padding: ${({ expanded, theme }): string => (expanded ? theme.spacing[1] : theme.spacing[0])};
+  will-change: height;
+  transition: height 0.2s ease-in-out;
+  overflow: hidden;
+  border-radius: ${({ theme }) => `0 0 ${theme.borderRadius.large} ${theme.borderRadius.large}`};
+  border-radius-top-left: 0;
+  border-radius-top-right: 0;
+
+  h4 {
+    margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+  }
+`;
+
+export const DrawerSnack = forwardRef<HTMLDivElement, PropsWithChildren<CustomContentProps>>(function DrawerSnack(
+  { id, message, children },
+  ref,
+) {
+  const { closeSnackbar } = useSnackbar();
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  const handleClose = () => {
+    closeSnackbar(id);
+  };
+
+  return (
+    <Wrapper ref={ref} data-testid={id}>
+      <Container expanded={expanded}>
+        <h4>{message}</h4>
+        <div style={{ display: 'flex' }}>
+          <Tooltip placement="top">
+            <Tooltip.Trigger>
+              <ArrowDownIcon onClick={() => setExpanded(!expanded)} size={16} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>{expanded ? 'Collapse' : 'Expand'}</Tooltip.Content>
+          </Tooltip>
+          <Tooltip placement="top">
+            <Tooltip.Trigger>
+              <CloseIcon onClick={handleClose} size={16} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Close</Tooltip.Content>
+          </Tooltip>
+        </div>
+      </Container>
+      <Content expanded={expanded}>{children}</Content>
+    </Wrapper>
+  );
+});