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

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

@@ -0,0 +1,47 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { pulseAnimation, styled } from '../../../styled';
+import { AlertVariants, Color } from '../../../styled';
+import { shade } from 'polished';
+
+type ColorVariant = AlertVariants | Color | 'default';
+
+const Container = styled.div<{ variant: ColorVariant; animate: boolean }>`
+  background-color: ${({ theme, variant }) =>
+    variant === 'default' ? theme.colors.background : shade('0.8', theme.colors[variant])};
+  color: ${({ theme, variant }) => (variant === 'default' ? theme.colors.text : theme.colors[variant])};
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+  font-weight: 600;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  width: fit-content;
+  height: 1.5rem;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -${({ theme }) => theme.spacing['1']};
+  right: -${({ theme }) => theme.spacing['0_75']};
+  padding: ${({ theme }) => theme.spacing['0_25']};
+  border: 1px solid
+    ${({ theme, variant }) => (variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant])};
+
+  animation: ${({ animate, variant, theme }) =>
+      animate ? pulseAnimation(variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant]) : 'none'}
+    5s infinite ease-in-out;
+`;
+
+export interface BadgeProps {
+  variant?: ColorVariant;
+  animate?: boolean;
+}
+
+export const Badge = forwardRef<HTMLDivElement, PropsWithChildren<BadgeProps>>(function Badge(
+  { variant = 'default', children, animate = false },
+  ref,
+) {
+  return (
+    <Container ref={ref} variant={variant} animate={animate}>
+      {children}
+    </Container>
+  );
+});

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,49 @@
+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']};
+    color: ${({ theme }) => theme.colors.text};
+
+    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="/"
+    />
+  );
+};

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

@@ -0,0 +1,193 @@
+import { FC, ReactElement, cloneElement } from 'react';
+import { Company } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { styled } from '../../../styled';
+import { Link } from '@tanstack/react-router';
+import {
+  AiOutlineBook,
+  AiOutlineMenu,
+  //AiOutlineWifi,
+  AiOutlineRight,
+  AiOutlineArrowRight as ArrowRightIcon,
+  //AiOutlineShop,
+} from 'react-icons/ai';
+
+const Container = styled.div`
+  width: 700px;
+  margin: 0 auto;
+  padding: 6rem 0;
+  
+  p {
+    font-size: 1.7rem;
+    text-align: center;
+    color: ${({ theme }) => theme.colors.textAlt};
+
+    &.error {
+      margin-top: ${({ theme }) => theme.spacing[6]};
+      color: ${({ theme }) => theme.colors.primary};
+      font-size: ${({ theme }) => theme.fontSize.large};
+      font-weight: 600;
+      text-align: center;
+    }
+  }
+
+  h3 {
+    font-size: 4.125rem;
+    font-weight: 700;
+    color: ${({ theme }) => theme.colors.text};
+    margin-bottom: .5rem;
+    text-align: center;
+  }
+  h4 {
+    font-weight: 600;
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.colors.textAlt};
+    margin: 3rem 0 1.5rem 0;
+  }
+  h5 {
+    font-size: 1.7rem;
+  }
+
+  ul {
+    margin-bottom: 1.5rem;
+    li {
+      position: relative;
+      &:first-child {
+        border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+      }
+
+      border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+      width: 100%;
+      padding: 2.5rem .5rem;
+
+      a {
+        display: flex;
+        height: 100%;
+        p  {
+            font-size: 1.4rem;
+          }
+        }
+      }
+    }
+  }
+  a {
+    color: ${({ theme }) => theme.colors.primary};
+    font-weight: 600;
+  }
+  `;
+
+const HomeLink = styled((props) => <Link {...props} />)`
+  display: flex;
+  align-items: center;
+  svg {
+    margin-left: 1rem;
+    fill: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+const ChevronRightIcon = styled(AiOutlineRight)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1rem;
+`;
+
+const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  margin-right: 2rem;
+`;
+
+export interface ErrorPageProps {
+  listItems?: ListItem[];
+  homeRoute: string;
+  title: string;
+  description: string;
+  errorCode: number;
+}
+
+interface ListItem {
+  icon: ReactElement;
+  title: string;
+  description: string;
+  to: string;
+}
+
+const defaultListItems = [
+  {
+    icon: <AiOutlineBook />,
+    title: 'Documentation',
+    description: 'Learn how to integrate our tools with your app',
+    to: 'https://docs.takaro.io',
+  },
+  {
+    icon: <AiOutlineMenu />,
+    title: 'Api reference',
+    description: 'A complete API reference for our libraries',
+    to: 'https://api.takaro.io/api.html',
+  },
+  /*
+  {
+    icon: <AiOutlineWifi />,
+    title: 'Guides',
+    description: 'Installation guides that cover popular setups',
+    to: '',
+  },
+  {
+    icon: <AiOutlineShop />,
+    title: 'Blog',
+    description: 'Read our latest news and articles',
+    to: '',
+  },
+  */
+];
+
+export const ErrorPage: FC<ErrorPageProps> = ({
+  listItems = defaultListItems,
+  homeRoute,
+  title,
+  description,
+  errorCode,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Container>
+      <Company />
+      <p className="error">{errorCode}</p>
+      <h3>{title}</h3>
+      <p>{description}</p>
+      {listItems && listItems.length && (
+        <>
+          <h4>Popular pages</h4>
+          <ul>
+            {listItems.map(({ icon, title, description, to }) => (
+              <li key={`${title}-${to}`}>
+                <a href={to}>
+                  <ChevronRightIcon />
+                  <IconContainer>
+                    {cloneElement(icon, {
+                      size: 24,
+                      fill: theme.colors.primary,
+                    })}
+                  </IconContainer>
+                  <div>
+                    <h5>{title}</h5>
+                    <p>{description}</p>
+                  </div>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+      <HomeLink to={homeRoute}>
+        Or go back home <ArrowRightIcon />{' '}
+      </HomeLink>
+    </Container>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FormError, FormErrorProps } from '.';
+
+export default {
+  title: 'Feedback/FormError',
+  component: FormError,
+  args: {
+    error: 'This is the text',
+  },
+} as Meta<FormErrorProps>;
+
+export const SingleError: StoryObj<FormErrorProps> = {
+  args: {
+    error: 'Your password must be at least 8 characters',
+  },
+};
+
+export const MultipleErrors: StoryObj<FormErrorProps> = {
+  args: {
+    error: [
+      'Your password must be at least 8 characters',
+      'Your password must include at least one pro wrestling finishing move',
+    ],
+  },
+};

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

@@ -0,0 +1,54 @@
+import { FC, useEffect, useRef } from 'react';
+import { styled } from '../../../styled';
+import { shade } from 'polished';
+
+const Container = styled.div<{ hasMultiple: boolean }>`
+  width: 100%;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  margin-bottom: ${({ theme }) => theme.spacing[1]};
+  background-color: ${({ theme }) => shade(0.5, theme.colors.error)};
+  border: 1px solid ${({ theme }) => theme.colors.error};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+
+  p,
+  li {
+    color: ${({ theme }) => theme.colors.white};
+    list-style: ${({ hasMultiple }) => (hasMultiple ? 'disc inside' : 'none')};
+    display: list-item;
+
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+`;
+
+export interface FormErrorProps {
+  /// Message for each type of error
+  error?: string | string[] | null;
+}
+
+export const FormError: FC<FormErrorProps> = ({ error = 'Something went wrong.' }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    containerRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [containerRef]);
+
+  if (error === null) {
+    return 'Something went wrong.';
+  }
+
+  if (error.constructor === String) {
+    error = [error];
+  }
+
+  return (
+    <Container ref={containerRef} autoFocus hasMultiple={error.length > 1}>
+      <ul>
+        {(error as string[]).map((m, i) => (
+          <li key={`form-error-message-${i}`}>{m}</li>
+        ))}
+      </ul>
+    </Container>
+  );
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { IconTooltip, IconTooltipProps } from '.';
+import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Feedback/IconTooltip',
+  component: IconTooltip,
+  args: {
+    placement: 'bottom',
+  },
+} as Meta<IconTooltipProps>;
+
+export const Default: StoryFn<IconTooltipProps> = (args) => {
+  return (
+    <div style={{ width: '200px' }}>
+      <IconTooltip placement={args.placement} initialOpen={args.initialOpen} icon={<QuestionIcon />}>
+        this is the tooltip content
+      </IconTooltip>
+    </div>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { cloneElement, FC, ReactElement } from 'react';
+import { Tooltip, TooltipProps } from '../Tooltip';
+import { Size, styled } from '../../../styled';
+import { getIconSize } from '../../actions/IconButton/getIconSize';
+import { ButtonColor } from '../../actions/Button/style';
+import { useTheme } from '../../../hooks';
+
+type TooltipIconColor = ButtonColor;
+
+const TriggerContainer = styled.div`
+  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 interface IconTooltipProps extends TooltipProps {
+  icon: ReactElement;
+  size?: Size;
+  color?: TooltipIconColor;
+}
+
+export const IconTooltip: FC<IconTooltipProps> = ({
+  children,
+  initialOpen,
+  open,
+  icon,
+  size = 'medium',
+  color = 'white',
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip initialOpen={initialOpen} open={open}>
+      <Tooltip.Trigger asChild>
+        <TriggerContainer>
+          {cloneElement(icon, { size: getIconSize(size), fill: theme.colors[color] })}
+        </TriggerContainer>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <ContentContainer>{children}</ContentContainer>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Spinner as SpinnerComponent, SpinnerProps, Loading, LoadingProps } from '..';
+
+const WrapperDecorator = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 5rem;
+  border-radius: 1rem;
+  background-color: ${({ theme }): string => theme.colors.background};
+  span {
+    font-weight: 900;
+  }
+`;
+
+export default {
+  title: 'Feedback/Spinner',
+  decorators: [(story) => <WrapperDecorator>{story()}</WrapperDecorator>],
+  subcomponents: { SpinnerComponent, Loading },
+} as Meta<SpinnerProps>;
+
+export const Spinner: StoryFn<SpinnerProps> = (args) => <SpinnerComponent {...args} />;
+
+export const LoadingPage: StoryFn<LoadingProps> = (args) => {
+  return <Loading {...args} />;
+};

package/src/components/feedback/Loaders/Loading.test.tsx

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

package/src/components/feedback/Loaders/Loading.test.tsx.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Loading/> 1`] = `
+<div>
+  <svg
+    fill="#664DE5"
+    height="105"
+    viewBox="0 0 105 105"
+    width="105"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="0s"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="12.5"
+      cy="52.5"
+      fill-opacity=".5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="100ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="300ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="52.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="600ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="12.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="800ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="52.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="400ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="12.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="700ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="52.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="500ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+    <circle
+      cx="92.5"
+      cy="92.5"
+      r="12.5"
+    >
+      <animate
+        attributeName="fill-opacity"
+        begin="200ms"
+        calcMode="linear"
+        dur="1s"
+        repeatCount="indefinite"
+        values="1;.2;1"
+      />
+    </circle>
+  </svg>
+</div>
+`;