@takaro/lib-components 0.0.1

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;
+
+    &.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.secondary};
+    margin-bottom: .5rem;
+    text-align: center;
+  }
+  h4 {
+    font-weight: 600;
+    font-size: 1.5rem;
+    color: ${({ theme }) => theme.colors.secondary};
+    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: 'docs.takaro.io',
+  },
+  {
+    icon: <AiOutlineMenu />,
+    title: 'Api reference',
+    description: 'A complete API reference for our libraries',
+    to: 'https://api.stg.takaro.dev/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/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,7 @@
+import { Loading } from '.';
+import { render } from 'test-utils';
+
+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>
+`;

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

@@ -0,0 +1,107 @@
+import { FC } from 'react';
+import { useTheme } from '../../../hooks';
+
+export interface LoadingProps {
+  fill?: string;
+}
+
+export const Loading: FC<LoadingProps> = ({ fill = undefined }) => {
+  const theme = useTheme();
+  if (!fill) {
+    fill = theme.colors.primary;
+  }
+  return (
+    <svg fill={fill} 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" fillOpacity=".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>
+  );
+};

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

@@ -0,0 +1,7 @@
+import { Spinner } from '.';
+import { render } from 'test-utils';
+
+it('Should render <Spinner/>', () => {
+  const { container } = render(<Spinner size="small" />);
+  expect(container).toMatchSnapshot();
+});

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Spinner/> 1`] = `
+.c0 {
+  width: 15px;
+  height: 15px;
+  background-color: #ffffff;
+  width: 6px;
+  height: 6px;
+}
+
+<div>
+  <div
+    class="c0"
+    color="white"
+  />
+</div>
+`;

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

@@ -0,0 +1,74 @@
+// credits: https://codesandbox.io/s/framer-motion-keyframes-ekks8?fontsize=14&module=/src/Example.tsx&file=/src/Example.tsx:136-445
+
+import { FC } from 'react';
+import { styled } from '../../../styled';
+import { Color, Size, AlertVariants } from '../../../styled/types';
+import { motion } from 'framer-motion';
+import { shade } from 'polished';
+
+const Container = styled(motion.div)<{
+  $color: Color | AlertVariants | 'white' | 'background';
+  $size: Size;
+}>`
+  width: 15px;
+  height: 15px;
+  background-color: ${({ theme, $color }) => shade(0.5, theme.colors[$color])};
+  border: 1px solid ${({ theme, $color }) => theme.colors[$color]};
+
+  ${({ $size }) => {
+    switch ($size) {
+      case 'tiny':
+        return `
+          width: 4px;
+          height: 4px;
+        `;
+      case 'small':
+        return `
+          width: 6px;
+          height: 6px;
+        `;
+      case 'medium':
+        return `
+          width: 8px;
+          height: 8px;
+        `;
+      case 'large':
+        return `
+          width: 13px;
+          height: 13px;
+        `;
+      case 'huge':
+        return `
+          width: 20px;
+          height: 20px;
+        `;
+    }
+  }}
+`;
+
+export interface SpinnerProps {
+  size: Size;
+  color?: Color | AlertVariants | 'white' | 'background';
+}
+
+export const Spinner: FC<SpinnerProps> = ({ size, color = 'primary' }) => {
+  return (
+    <Container
+      animate={{
+        scale: [1, 2, 2, 1, 1],
+        rotate: [0, 0, 270, 270, 0],
+        borderRadius: ['20%', '20%', '50%', '50%', '20%'],
+      }}
+      $color={color}
+      $size={size}
+      transition={{
+        duration: 1.5,
+        ease: 'easeInOut',
+        times: [0, 0.2, 0.5, 0.8, 1],
+        repeat: Infinity,
+        repeatType: 'loop',
+        repeatDelay: 0,
+      }}
+    />
+  );
+};

package/src/components/feedback/Loaders/index.ts

@@ -0,0 +1,2 @@
+export { Loading } from './Loading';
+export { Spinner } from './Spinner';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { NetworkDetector } from '.';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+`;
+
+export default {
+  title: 'Feedback/NetworkDetector',
+  component: NetworkDetector,
+} as Meta;
+
+export const Default: StoryFn = () => (
+  <Wrapper>
+    <p>You can simulate an offline state in the browsers network tab.</p>
+    <NetworkDetector />
+  </Wrapper>
+);

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

@@ -0,0 +1,7 @@
+import { NetworkDetector } from '.';
+import { render } from 'test-utils';
+
+it('Should render <NetworkDetector/>', () => {
+  const { container } = render(<NetworkDetector />);
+  expect(container).toMatchSnapshot();
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <NetworkDetector/> 1`] = `<div />`;