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

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,8 @@
+import { Spinner } from '.';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
+
+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/__snapshots__/Loading.test.tsx.snap

@@ -0,0 +1,141 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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/__snapshots__/Spinner.test.tsx.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Spinner/> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg gDGTCm"
+    style="will-change: transform;"
+  />
+</div>
+`;

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,8 @@
+import { NetworkDetector } from '.';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
+
+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 />`;

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <NetworkDetector/> 1`] = `<div />`;

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

@@ -0,0 +1,41 @@
+import { FC, useEffect } from 'react';
+import { useSnackbar } from 'notistack';
+
+export const NetworkDetector: FC = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  // const [current, setCurrent] = useState();
+
+  function hasNetwork(online: boolean) {
+    if (online) {
+      enqueueSnackbar('Your network is back online!', {
+        variant: 'networkDetectorOnline',
+        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+      });
+    } else {
+      // offline
+      // TODO: make this persistent, with custom button and custom child
+      enqueueSnackbar('You are currently offline.', {
+        variant: 'networkDetectorOffline',
+        anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
+        persist: true,
+      });
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('offline', () => hasNetwork(false));
+    window.addEventListener('online', () => hasNetwork(true));
+
+    // clean up
+    return () => {
+      window.removeEventListener('online', () => {
+        /* */
+      });
+      window.removeEventListener('offline', () => {
+        /* */
+      });
+    };
+  }, []);
+
+  return null;
+};

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

@@ -0,0 +1,13 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { NotificationBanner, NotificationBannerProps } from '.';
+
+export default {
+  title: 'Feedback/NotificationBanner',
+  component: NotificationBanner,
+  args: {
+    title: 'This is the notification banner title',
+    description: 'This is the notification banner description',
+  },
+} as Meta<NotificationBannerProps>;
+
+export const Default: StoryFn<NotificationBannerProps> = (args) => <NotificationBanner {...args} />;

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

@@ -0,0 +1,15 @@
+import { NotificationBanner } from '.';
+import { it, expect } from 'vitest';
+import { render } from '../../../test/testUtils';
+
+it('Should render <NotificationBanner/>', () => {
+  // we need to create the portal
+  const notificationBannerPortal = document.createElement('div');
+  notificationBannerPortal.setAttribute('id', 'notification-banner');
+  document.body.appendChild(notificationBannerPortal);
+
+  const { container } = render(
+    <NotificationBanner description="Notification banner description" title="Notification banner title" />,
+  );
+  expect(container).toMatchSnapshot();
+});

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

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

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <NotificationBanner/> 1`] = `<div />`;

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

@@ -0,0 +1,78 @@
+import { FC, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { styled } from '../../../styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Tooltip } from '../Tooltip';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { shade } from 'polished';
+
+const Container = styled(motion.div)`
+  position: sticky;
+  background-color: ${({ theme }): string => shade(0.5, theme.colors.primary)};
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+  will-change: height;
+  overflow: hidden;
+  z-index: ${({ theme }) => theme.zIndex.notificationBanner};
+
+  div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+  p {
+    font-size: 1.1rem;
+  }
+
+  h3,
+  p {
+    color: white;
+    font-weight: 500;
+  }
+  svg {
+    fill: white;
+    cursor: pointer;
+  }
+`;
+
+export interface NotificationBannerProps {
+  title: string;
+  description: string;
+}
+
+/* What is <NotificationBanner?
+  ------------------------------
+  It is a sticky component that shows above the headerbar to show a notification and
+  can be hidden by clicking the X in the upper right corner.
+  IMPORTANT: the component requires a separate div mounted outside of root called with id notification-banner. 
+*/
+
+export const NotificationBanner: FC<NotificationBannerProps> = ({ title, description }) => {
+  const [visible, setVisible] = useState<boolean>(true);
+
+  return createPortal(
+    <AnimatePresence>
+      {visible && (
+        <Container initial={{ y: -40 }} animate={{ y: 0 }} exit={{ opacity: '0' }}>
+          <div>
+            <h3>{title}</h3>
+            <p>{description}</p>
+          </div>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <CloseIcon onClick={() => setVisible(false)} size={18} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Close</Tooltip.Content>
+          </Tooltip>
+        </Container>
+      )}
+    </AnimatePresence>,
+    document.querySelector('#notification-banner') as Element,
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Popover, PopoverProps } from '.';
+import { IconButton } from '../../actions';
+import { AiFillBug as BugIcon } from 'react-icons/ai';
+
+export default {
+  title: 'Feedback/Popover',
+  component: Popover,
+  args: {
+    placement: 'bottom',
+  },
+} as Meta<PopoverProps>;
+
+export const UnControlled: StoryFn<PopoverProps> = () => (
+  <Popover>
+    <Popover.Trigger>Click this to open it in the popover</Popover.Trigger>
+    <Popover.Content>this is the content of the popover</Popover.Content>
+  </Popover>
+);
+
+export const CustomTrigger: StoryFn<PopoverProps> = () => (
+  <>
+    By default trigger is rendered as a button, but you can pass any component as a trigger by setting the asChild prop
+    on the Popover.Trigger component.
+    <Popover>
+      <Popover.Trigger asChild>
+        <IconButton icon={<BugIcon />} ariaLabel="click me" />
+      </Popover.Trigger>
+      <Popover.Content>this is the content of the popover</Popover.Content>
+    </Popover>
+  </>
+);

package/src/components/feedback/Popover/PopoverContent.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, HTMLProps } from 'react';
+import { useMergeRefs, FloatingPortal, FloatingFocusManager, FloatingArrow } from '@floating-ui/react';
+import { usePopoverContext } from './PopoverContext';
+import { styled } from '../../../styled';
+import { useTheme } from '../../../hooks';
+
+const Container = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+`;
+
+export const PopoverContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function PopoverContent(
+  { style, ...props },
+  propRef,
+) {
+  const theme = useTheme();
+  const { context: floatingContext, arrowRef, ...context } = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+  if (!floatingContext.open) return null;
+
+  return (
+    <FloatingPortal>
+      <FloatingFocusManager context={floatingContext} modal={context.modal}>
+        <Container
+          ref={ref}
+          style={{ ...context.floatingStyles, ...style }}
+          aria-labelledby={context.labelId}
+          aria-describedby={context.descriptionId}
+          {...context.getFloatingProps(props)}
+        >
+          {props.children}
+          <FloatingArrow
+            ref={arrowRef}
+            context={floatingContext}
+            fill={theme.colors.background}
+            stroke={theme.colors.backgroundAccent}
+            style={{ transform: 'translateY(-1px)' }}
+            strokeWidth={1}
+          />
+        </Container>
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+});

package/src/components/feedback/Popover/PopoverContext.tsx

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