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

package/src/components/dialogs/Dialog/DialogContext.tsx

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

package/src/components/dialogs/Dialog/DialogHeading.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, HTMLProps, useId, useLayoutEffect } from 'react';
+import { useDialogContext } from './DialogContext';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { styled } from '../../../styled';
+import { IconButton, Tooltip } from '../../../components';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h4 {
+    font-size: ${({ theme }) => theme.fontSize.tiny};
+  }
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+`;
+
+interface DialogHeadingProps extends HTMLProps<HTMLHeadingElement> {
+  hasClose?: boolean;
+}
+
+export const DialogHeading = forwardRef<HTMLHeadingElement, DialogHeadingProps>(function DialogHeading(
+  { children, hasClose = true, ...props },
+  ref,
+) {
+  const { setLabelId, setOpen } = useDialogContext();
+  const id = useId();
+
+  useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+
+  return (
+    <Container>
+      <h4 {...props} ref={ref} id={id}>
+        {children}
+      </h4>
+      {hasClose && (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                setOpen(false);
+              }}
+              ariaLabel="Close dialog"
+              icon={<CloseIcon cursor="pointer" />}
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Close dialog</Tooltip.Content>
+        </Tooltip>
+      )}
+    </Container>
+  );
+});

package/src/components/dialogs/Dialog/index.tsx

@@ -0,0 +1,20 @@
+import { DialogOptions, useDialog } from './useDialog';
+import { FC, PropsWithChildren } from 'react';
+import { DialogContext } from './DialogContext';
+import { DialogContent } from './DialogContent';
+import { DialogBody } from './DialogBody';
+import { DialogHeading } from './DialogHeading';
+
+interface SubComponentTypes {
+  Content: typeof DialogContent;
+  Body: typeof DialogBody;
+  Heading: typeof DialogHeading;
+}
+
+export const Dialog: FC<PropsWithChildren<DialogOptions>> & SubComponentTypes = ({ children, ...options }) => {
+  return <DialogContext.Provider value={useDialog(options)}>{children}</DialogContext.Provider>;
+};
+
+Dialog.Content = DialogContent;
+Dialog.Body = DialogBody;
+Dialog.Heading = DialogHeading;

package/src/components/dialogs/Dialog/useDialog.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useState } from 'react';
+import { useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react';
+
+export interface DialogOptions {
+  open?: boolean;
+  initialOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function useDialog({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: DialogOptions) {
+  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 data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const context = data.context;
+
+  const interactions = useInteractions([
+    useClick(context, {
+      enabled: controlledOpen == null,
+    }),
+    useDismiss(context, { outsidePressEvent: 'mousedown', bubbles: false }),
+    useRole(context, { role: 'dialog' }),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId],
+  );
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Alert, AlertProps } from '.';
+
+export default {
+  title: 'Feedback/Alert',
+  component: Alert,
+  args: {
+    text: 'This is the title',
+    variant: 'info',
+  },
+} as Meta<AlertProps>;
+
+export const Default: StoryFn<AlertProps> = (args) => <Alert {...args} />;
+
+export const TitleOnly: StoryObj<AlertProps> = {
+  args: {
+    title: 'Important Notice',
+    variant: 'info',
+  },
+};
+
+export const WithList: StoryObj<AlertProps> = {
+  args: {
+    title: 'There were errors with your submission',
+    text: [
+      'Your password must be at least 8 characters',
+      'Your password must include at least one pro wrestling finishing move',
+    ],
+    variant: 'error',
+  },
+};
+
+export const Warning: StoryObj<AlertProps> = {
+  args: {
+    title: 'Attention required',
+    text: 'This is a warning! Please read this carefully before you continue!',
+    variant: 'warning',
+    action: {
+      execute: () => {
+        /* */
+      },
+      text: 'View status',
+    },
+  },
+};
+
+export const SingleLine: StoryObj<AlertProps> = {
+  args: {
+    text: 'This is a single line now',
+    variant: 'info',
+  },
+};
+
+export const SingleLineWithAction: StoryObj<AlertProps> = {
+  args: {
+    text: 'This is a single line now',
+    variant: 'error',
+    action: {
+      execute: () => {},
+      text: 'details',
+    },
+  },
+};
+
+export const SingleLineLongWithAction: StoryObj<AlertProps> = {
+  args: {
+    text: 'This is a very very very very very very very very very very long line that stretches to 2 lines',
+    variant: 'error',
+    action: {
+      execute: () => {},
+      text: 'details',
+    },
+  },
+};

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

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

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

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Alert/> 1`] = `
+.c0 {
+  width: 100%;
+  padding: 1rem 1.2rem;
+  border-radius: 1rem;
+  margin: 1.5rem auto 1.5rem auto;
+  background-color: #d9d2f9;
+}
+
+.c0 h2 {
+  font-size: 1.825rem;
+  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;
+  font-weight: 700;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c0 p {
+  margin-top: 1.5rem;
+}
+
+.c0 p,
+.c0 li {
+  font-size: 1.325rem;
+}
+
+.c0 ul {
+  margin-left: 15px;
+}
+
+.c0 ul li {
+  list-style-type: disc;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.c0 h2 {
+  color: #331ab2;
+}
+
+.c0 p,
+.c0 li {
+  color: #331ab2;
+}
+
+.c0::marker {
+  color: #331ab2;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  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;
+  margin-right: 1.4rem;
+}
+
+.c2 svg {
+  fill: #664DE5;
+}
+
+.c3 {
+  display: none;
+}
+
+.c3 button {
+  margin-top: 2rem;
+  margin-right: 2rem;
+  padding: 0.8rem 0.5rem 0.8rem 0.5rem;
+  border-radius: 0.5rem;
+  background-color: #b2a6f2;
+  font-size: 1.3rem;
+  border: none;
+  cursor: pointer;
+  font-weight: 700;
+  color: #331ab2;
+}
+
+<div>
+  <div
+    class="c0"
+    style="opacity: 0;"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <svg
+          fill="currentColor"
+          height="24"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 1024 1024"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          />
+        </svg>
+      </div>
+      <h2>
+        Alert title
+      </h2>
+      <div />
+      <p>
+        Alert text
+      </p>
+      <div />
+      <div
+        class="c3"
+      />
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Alert/> 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="sc-aXZVg dfhkGl"
+    role="status"
+    style="opacity: 0; will-change: opacity;"
+  >
+    <div
+      class="sc-gEvEer ciCPPR"
+    >
+      <div
+        class="sc-eqUAAy hqcNUj"
+      >
+        <svg
+          fill="currentColor"
+          height="24"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 1024 1024"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          />
+        </svg>
+      </div>
+      <h2>
+        Alert title
+      </h2>
+      <p>
+        Alert text
+      </p>
+      <div
+        class="sc-fqkvVR huFkoW action"
+      />
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,120 @@
+import { forwardRef, isValidElement, MouseEvent, ReactElement, useState } from 'react';
+import { Container, Grid, IconContainer, ButtonContainer } from './style';
+import {
+  AiFillCheckCircle as Success,
+  AiFillCloseCircle as Error,
+  AiOutlineWarning as Warning,
+  AiFillInfoCircle as Info,
+} from 'react-icons/ai';
+import { AnimatePresence } from 'framer-motion';
+import { Button } from '../../../components';
+
+export type AlertVariants = 'success' | 'error' | 'warning' | 'info';
+
+type Action = {
+  execute: () => void;
+  text: string;
+};
+
+export interface AlertProps {
+  variant: AlertVariants;
+  title?: string;
+  text?: string | string[] | ReactElement;
+  dismiss?: boolean;
+  action?: Action;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { variant, title, text, dismiss = false, action },
+  ref,
+) {
+  const [visible, setVisible] = useState(true);
+  const hasTitle = !!title;
+  const hasText = !!text;
+  const hasContent = hasTitle || hasText;
+  // Use center alignment when we have only one content line (title OR text, not both)
+  // Use start alignment when we have multiple lines (title AND text, or text as an array)
+  const useStartAlignment = (hasTitle && hasText) || Array.isArray(text);
+
+  const handleExecute = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    action?.execute();
+  };
+  const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setVisible(false);
+  };
+
+  function getIcon() {
+    switch (variant) {
+      case 'success':
+        return <Success size={24} />;
+      case 'error':
+        return <Error size={24} />;
+      case 'warning':
+        return <Warning size={24} />;
+      case 'info':
+        return <Info size={24} />;
+    }
+  }
+
+  function renderText() {
+    if (isValidElement(text)) {
+      return text;
+    }
+
+    if (typeof text === 'string') {
+      return <p>{text}</p>;
+    } else if (Array.isArray(text)) {
+      return <ul>{text?.map((message, index) => <li key={index}>{message}</li>)}</ul>;
+    }
+  }
+
+  // Determine ARIA role based on variant
+  const getAriaRole = () => {
+    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';
+  };
+
+  const getAriaLive = () => {
+    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <Container
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          $hasTitle={hasTitle}
+          initial={{ opacity: 0 }}
+          $variant={variant}
+          transition={{ duration: 0.2 }}
+          ref={ref}
+          role={getAriaRole()}
+          aria-live={getAriaLive()}
+          aria-atomic="true"
+        >
+          <Grid $useStartAlignment={useStartAlignment}>
+            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+            {title && <h2>{title}</h2>}
+            {renderText()}
+            <ButtonContainer hasContent={hasContent} show={!!(dismiss || action)} variant={variant} className="action">
+              {action && (
+                <Button size="small" variant="outline" onClick={handleExecute} color={variant}>
+                  {action.text}
+                </Button>
+              )}
+              {dismiss && (
+                <Button size="small" color="white" variant="outline" onClick={handleDismiss}>
+                  Dismiss
+                </Button>
+              )}
+            </ButtonContainer>
+          </Grid>
+        </Container>
+      )}
+    </AnimatePresence>
+  );
+});

package/src/components/feedback/Alert/style.ts

@@ -0,0 +1,97 @@
+import { styled } from '../../../styled';
+import { AlertVariants } from '.';
+import { motion } from 'framer-motion';
+import { shade } from 'polished';
+
+// Since this actually a motion.div we are passing props to that only should be consumed by styled compmonents
+// and not being passed the the underlying react node, we can prefix the prop names with `$`to turn it into
+// a transient prop.
+export const Container = styled(motion.div)<{
+  $variant: AlertVariants;
+  $hasTitle: boolean;
+}>`
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing['0_75']};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
+  h2 {
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    font-weight: 700;
+    margin: 0;
+    text-align: left;
+  }
+  p {
+    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_25'] : theme.spacing[0])};
+    margin-bottom: 0;
+    hyphens: auto;
+    text-align: left;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+  }
+  li {
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    text-align: left;
+  }
+  ul {
+    margin-left: ${({ theme }) => theme.spacing['1_5']};
+    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_25'] : theme.spacing[0])};
+    margin-bottom: 0;
+    li {
+      list-style-type: disc;
+      margin-top: ${({ theme }) => theme.spacing['0_5']};
+      margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+      &::marker {
+        font-size: ${({ theme }) => theme.fontSize.medium};
+      }
+    }
+  }
+  /* set background color equal to provided type */
+  ${({ $variant, theme }): string => {
+    return `
+        background-color: ${shade('0.5', theme.colors[$variant])};
+        border: 1px solid ${theme.colors[$variant]};
+        h2 {
+          color: white;
+        }
+        p, li {
+          color: white;
+        }
+        ::marker {
+          color: white;
+        }
+        `;
+  }}
+`;
+
+export const Grid = styled.div<{ $useStartAlignment: boolean }>`
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  align-items: ${({ $useStartAlignment }) => ($useStartAlignment ? 'start' : 'center')};
+  gap: ${({ theme }) => theme.spacing['0_5']};
+
+  p,
+  ul,
+  .action {
+    grid-column: 2;
+  }
+`;
+
+export const IconContainer = styled.div<{ variant: AlertVariants }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: white;
+  }
+`;
+
+export const ButtonContainer = styled.div<{
+  show: boolean;
+  variant: AlertVariants;
+  hasContent: boolean;
+}>`
+  display: ${({ show }): string => (show ? 'flex' : 'none')};
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  margin-top: ${({ theme, hasContent }): string => (hasContent ? theme.spacing['1'] : theme.spacing[0])};
+`;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Badge, BadgeProps } from '.';
+
+export default {
+  title: 'Feedback/Badge',
+  component: Badge,
+  args: {
+    variant: 'warning',
+    animate: false,
+  },
+} as Meta<BadgeProps>;
+
+export const Default: StoryFn<BadgeProps> = (args) => (
+  <div>
+    <h2 style={{ backgroundColor: 'orange', position: 'relative', width: 'fit-content' }}>
+      this is the title{' '}
+      <Badge variant={args.variant} animate={args.animate}>
+        here
+      </Badge>
+    </h2>
+  </div>
+);