@takaro/lib-components 0.0.1

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,77 @@
+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 Success: StoryObj<AlertProps> = {
+  args: {
+    title: 'Order complete',
+    text: 'Your order has been sucessfully processed. We are completing the report.',
+    variant: 'success',
+    dismiss: true,
+  },
+};
+
+export const Error: 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,7 @@
+import { Alert } from '.';
+import { render } from 'test-utils';
+
+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/index.tsx

@@ -0,0 +1,109 @@
+import { forwardRef, MouseEvent, 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 { Elevation } from '../../../styled/';
+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[];
+  elevation?: Elevation;
+  dismiss?: boolean;
+  action?: Action;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ variant, title, text, dismiss = false, elevation = 4, action }, ref) => {
+    const [visible, setVisible] = useState(true);
+
+    const hasTitle = title ? true : false;
+
+    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} />;
+      }
+    }
+    return (
+      <AnimatePresence>
+        {visible && (
+          <Container
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            $hasTitle={hasTitle}
+            initial={{ opacity: 0 }}
+            $variant={variant}
+            $elevation={elevation}
+            transition={{ duration: 0.2 }}
+            ref={ref}
+            role="status"
+          >
+            <Grid hasTitle={hasTitle}>
+              <IconContainer variant={variant}>{getIcon()}</IconContainer>
+
+              {/* If title is declared set title, otherwise put everything on single line */}
+              {title && (
+                <>
+                  <h2>{title}</h2>
+                  <div />
+                </>
+              )}
+              {typeof text === 'string' ? (
+                <p>{text}</p>
+              ) : (
+                text && (
+                  <ul>
+                    {text.map((message) => (
+                      <li>{message}</li>
+                    ))}
+                  </ul>
+                )
+              )}
+              {hasTitle ? <div /> : null}
+              <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
+                {action && (
+                  <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
+                )}
+                {dismiss && (
+                  <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
+                )}
+              </ButtonContainer>
+            </Grid>
+          </Container>
+        )}
+      </AnimatePresence>
+    );
+  }
+);

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

@@ -0,0 +1,87 @@
+import { Elevation, 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;
+  $elevation: Elevation;
+}>`
+  width: 100%;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
+  margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
+  h2 {
+    font-size: 1.825rem;
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    justify-content: flex-start;
+  }
+  p {
+    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_5'] : theme.spacing[0])};
+    margin-bottom: 0;
+    hyphens: auto;
+  }
+  p,
+  li {
+    font-size: 1.325rem;
+  }
+  ul {
+    margin-left: ${({ theme }) => theme.spacing['1_5']};
+    li {
+      list-style-type: disc;
+      margin-top: ${({ theme }) => theme.spacing['0_5']};
+      margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+    }
+  }
+  /* 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<{ hasTitle: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ theme, hasTitle }) =>
+    !hasTitle ? `${theme.spacing[5]} 1fr fit-content(100px)` : `${theme.spacing[5]} 1fr`};} 
+  align-items: center;
+  gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
+`;
+
+export const IconContainer = styled.div<{ variant: AlertVariants }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.spacing['1']};
+  svg {
+    fill: ${({ variant, theme }): string => theme.colors[variant]};
+  }
+`;
+
+export const ButtonContainer = styled.div<{
+  show: boolean;
+  variant: AlertVariants;
+  hasTitle: boolean;
+}>`
+  display: ${({ show }): string => (show ? 'flex' : 'none')};
+  align-items: center;
+  margin-top: ${({ theme, hasTitle }): string => (hasTitle ? theme.spacing['1'] : theme.spacing[0])};
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ErrorFallback } from '.';
+
+export default {
+  title: 'Feedback/ErrorFallback',
+  component: ErrorFallback,
+} as Meta;
+
+export const Default: StoryFn = () => <ErrorFallback />;

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

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { styled } from '../../../styled';
+import { shade } from 'polished';
+
+const Wrapper = styled.div`
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+  width: 100%;
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.colors.error};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  padding: ${({ theme }) => theme.spacing[2]};
+  background-color: ${({ theme }) => shade(0.5, theme.colors.error)};
+  text-align: center;
+
+  h1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+
+    svg {
+      margin-right: ${({ theme }) => theme.spacing['0_75']};
+    }
+  }
+`;
+
+// This should be used as a fallback component for error boundaries.
+export const ErrorFallback: FC = () => {
+  return (
+    <Wrapper>
+      <Container>
+        <h1>Oops, that's our bad!</h1>
+        <p>We are not exactly sure what happened, but something went wrong. </p>
+        <p>If you need immediate help, please let us know.</p>
+      </Container>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { ErrorPage, ErrorPageProps } from '.';
+
+export default {
+  title: 'Views/PageNotFound',
+  component: ErrorPage,
+} as Meta;
+
+export const PageNotFound: StoryFn<ErrorPageProps> = () => {
+  return (
+    <ErrorPage
+      errorCode={404}
+      title="Page not found"
+      description="The page you are looking for does not exist."
+      homeRoute="/"
+    />
+  );
+};
+
+export const NotAuthorized: StoryFn<ErrorPageProps> = () => {
+  return (
+    <ErrorPage
+      errorCode={401}
+      title="Not authorized"
+      description="You are not authorized to view this page.
+    Contact your administrator to request access."
+      homeRoute="/"
+    />
+  );
+};