@takaro/lib-components 0.0.1

package/src/components/other/PermissionsGuard/PermissionsGuard.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { PermissionsGuard, PermissionsGuardProps } from '.';
+import { PERMISSIONS } from '@takaro/apiclient';
+import { Alert } from '../../feedback';
+
+export default {
+  title: 'Other/PermissionsGuard',
+  component: PermissionsGuard,
+  decorators: [
+    (story) => (
+      <div>
+        <Alert
+          variant="warning"
+          text="It is unlikely you will use THIS permissionguard directly. There should be a specific permissionguard in web-* application"
+        />
+        {story()}
+      </div>
+    ),
+  ],
+} as Meta<PermissionsGuardProps>;
+
+export const Default: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ReadUsers, PERMISSIONS.ManageUsers],
+    requiredPermissions: [PERMISSIONS.ReadUsers],
+    children: <div>You can see this because you have 'READ_USERS' permission.</div>,
+  },
+};
+
+export const NoAccess: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ReadUsers],
+    requiredPermissions: [PERMISSIONS.ManageUsers],
+    children: <div>You cannot see this because you don't have 'MANAGE_USERS' permission.</div>,
+  },
+};
+
+export const MultiplePermissionsRequired: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ManageUsers, PERMISSIONS.ReadUsers],
+    requiredPermissions: [[PERMISSIONS.ManageUsers, PERMISSIONS.ReadUsers]],
+    children: <div>You can see this because you have both 'MANAGE_USERS' and 'READ_USERS' permissions.</div>,
+  },
+};
+
+export const OrPermissionsRequired: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ManageUsers],
+    // Here each inner array is an AND condition, and we have an OR condition between these sets
+    requiredPermissions: [[PERMISSIONS.ManageUsers], [PERMISSIONS.ReadUsers]],
+    children: <div>You can see this because you have either 'MANAGE_USERS' or 'READ_USERS' permission.</div>,
+  },
+};

package/src/components/other/PermissionsGuard/index.tsx

@@ -0,0 +1,43 @@
+import { FC, PropsWithChildren, ReactElement, useMemo } from 'react';
+import { PERMISSIONS } from '@takaro/apiclient';
+
+type PermissionsSet = PERMISSIONS | PERMISSIONS[];
+export type RequiredPermissions = PermissionsSet[];
+
+export interface PermissionsGuardProps {
+  requiredPermissions: RequiredPermissions;
+  userPermissions: PERMISSIONS[];
+  fallback?: ReactElement;
+}
+
+export const hasPermissionHelper = (
+  userPermissions: PERMISSIONS[],
+  requiredPermissions: RequiredPermissions
+): boolean => {
+  if (userPermissions.includes(PERMISSIONS.Root)) {
+    return true;
+  }
+  return requiredPermissions.some((permissionSet) =>
+    Array.isArray(permissionSet)
+      ? permissionSet.every((permission) => userPermissions.includes(permission))
+      : userPermissions.includes(permissionSet as PERMISSIONS)
+  );
+};
+
+export const PermissionsGuard: FC<PropsWithChildren<PermissionsGuardProps>> = ({
+  userPermissions,
+  requiredPermissions,
+  children,
+  fallback,
+}) => {
+  // only update permissions when userPermissions or requiredPermissions change
+  const hasPermission = useMemo(() => {
+    return hasPermissionHelper(userPermissions, requiredPermissions);
+  }, [userPermissions, requiredPermissions]);
+
+  if (!hasPermission) {
+    return fallback ?? null;
+  }
+
+  return <>{children}</>;
+};

package/src/components/other/index.ts

@@ -0,0 +1,19 @@
+export { ClipBoard } from './ClipBoard';
+export type { ClipBoardProps } from './ClipBoard';
+
+export { Empty, EmptyPage } from './Empty';
+export type { EmptyProps } from './Empty';
+
+export { Company } from './Company';
+export type { CompanyProps } from './Company';
+
+export { ActionMenu, Action } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+
+export { CollapseList } from './CollapseList';
+
+export { PermissionsGuard, hasPermissionHelper } from './PermissionsGuard';
+export type { PermissionsGuardProps, RequiredPermissions } from './PermissionsGuard';
+
+export { Collapsible } from './Collapsible';
+export type { CollapsibleProps } from './Collapsible';

package/src/components/visual/Card/Card.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Card, CardProps } from '.';
+
+export default {
+  title: 'Layout/Card',
+  component: Card,
+  args: {
+    variant: 'default',
+  },
+} as Meta<CardProps>;
+
+export const Default: StoryFn<CardProps> = (args) => {
+  return (
+    <Card variant={args.variant} onClick={() => {}}>
+      this is the content
+    </Card>
+  );
+};

package/src/components/visual/Card/index.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, HTMLProps } from 'react';
+import { styled } from '../../../styled';
+
+type Variant = 'default' | 'outline';
+
+const Container = styled.div<{ canClick: boolean; variant: Variant }>`
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  background-color: ${({ theme, variant }) =>
+    variant === 'outline' ? theme.colors.background : theme.colors.backgroundAlt};
+  border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: ${({ theme }) => theme.spacing[2]};
+  cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
+
+  &:focus-within {
+    border-color: none;
+  }
+
+  &:focus {
+    border-color: ${({ theme, canClick }) => (canClick ? theme.colors.primary : theme.colors.backgroundAccent)};
+  }
+
+  &:active {
+    border-color: ${({ theme, canClick }) => (canClick ? theme.colors.primary : theme.colors.backgroundAccent)};
+  }
+
+  overflow: hidden; /* Ensure the container hides content overflow */
+`;
+
+// Extend HTMLProps for standard HTML attributes and add custom props
+export interface CardProps extends HTMLProps<HTMLDivElement> {
+  variant?: Variant;
+}
+
+// Forward ref and spread all props to the Container
+export const Card = forwardRef<HTMLDivElement, CardProps>(({ children, variant = 'default', ...props }, ref) => {
+  const canClick = 'onClick' in props;
+
+  // Extract the className prop, if present
+  const { className, ...restProps } = props;
+
+  return (
+    // TODO: type this properly
+    //eslint-disable-next-line
+    //@ts-ignore
+    <Container ref={ref} canClick={canClick} variant={variant} className={className} {...restProps}>
+      {children}
+    </Container>
+  );
+});

package/src/components/visual/Divider/Divider.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Divider, DividerProps } from '.';
+
+export default {
+  title: 'Layout/Divider',
+  component: Divider,
+  args: {
+    label: { text: 'label', labelPosition: 'center' },
+  },
+} as Meta<DividerProps>;
+
+export const Default: StoryFn<DividerProps> = (args) => (
+  <div>
+    <div>this is the content above</div>
+    <Divider {...args} />
+    <div> this is the content after</div>
+  </div>
+);

package/src/components/visual/Divider/Divider.test.tsx

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

package/src/components/visual/Divider/Divider.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Accordion /> 1`] = `
+.c0 {
+  position: relative;
+  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;
+  width: 70%;
+  margin: 1rem auto 1rem auto;
+}
+
+.c1 {
+  width: 100%;
+  height: 1px;
+  background-color: #d3d3d3;
+  z-index: 0;
+}
+
+<div>
+  <div
+    class="c0"
+    spacing="medium"
+  >
+    <div
+      class="c1"
+    />
+  </div>
+</div>
+`;

package/src/components/visual/Divider/index.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import { Size, styled } from '../../../styled';
+
+const Container = styled.div<{ size: Size; fullWidth: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : '70%')};
+
+  ${({ size, theme }) => {
+    switch (size) {
+      case 'tiny':
+        return `margin: ${theme.spacing['0_25']} auto ${theme.spacing['0_25']} auto`;
+      case 'small':
+        return `margin: ${theme.spacing['0_5']} auto ${theme.spacing['0_5']} auto`;
+      case 'medium':
+        return `margin: ${theme.spacing['0_75']} auto ${theme.spacing['0_75']} auto`;
+      case 'large':
+        return `margin: ${theme.spacing['2_5']} auto ${theme.spacing['2_5']} auto`;
+      case 'huge':
+        return `margin: ${theme.spacing[8]} auto ${theme.spacing[8]} auto`;
+    }
+  }}
+`;
+
+const Label = styled.label<{
+  position: 'left' | 'center' | 'right';
+}>`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  p {
+    color: ${({ theme }) => theme.colors.textAlt};
+    background-color: ${({ theme }) => theme.colors.background};
+    font-size: 1.325rem;
+    padding: ${({ theme }) => `0 ${theme.spacing['0_5']}`};
+  }
+
+  ${({ position }) => {
+    switch (position) {
+      case 'left':
+        return `
+          left: 0;
+        `;
+      case 'center':
+        return `
+        left: 50%;
+        `;
+      case 'right':
+        return `
+        right: 0
+        `;
+    }
+  }}
+`;
+const Line = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme }) => theme.colors.backgroundAccent};
+`;
+
+type LabelProps = {
+  text: string;
+  labelPosition: 'left' | 'center' | 'right';
+};
+
+export interface DividerProps {
+  label?: LabelProps;
+  size?: Size;
+  fullWidth?: boolean;
+  /* TODO: reimplement sizing (this might go automatically with different density options. */
+}
+
+export const Divider: FC<DividerProps> = ({ label, size = 'medium', fullWidth = false }) => {
+  return (
+    <Container fullWidth={fullWidth} size={size}>
+      <Line />
+      {label && (
+        <Label position={label.labelPosition}>
+          <p>{label.text}</p>
+        </Label>
+      )}
+    </Container>
+  );
+};

package/src/components/visual/index.ts

@@ -0,0 +1,5 @@
+export { Card } from './Card';
+export type { CardProps } from './Card';
+
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';

package/src/errors/base.ts

@@ -0,0 +1,11 @@
+interface IErrorOptions {
+  meta: unknown;
+}
+
+export class BaseError extends Error {
+  constructor(public message: string, protected options?: Partial<IErrorOptions>) {
+    super(message);
+    // Ensure the name of this error is the same as the class name
+    this.name = this.constructor.name;
+  }
+}

package/src/errors/errors.ts

@@ -0,0 +1,109 @@
+import { AxiosError } from 'axios';
+import { BaseError } from './base';
+import * as Sentry from '@sentry/react';
+import { ValidationError } from 'class-validator';
+
+// Define a type for the error message mapping
+export interface ErrorMessageMapping {
+  UniqueConstraintError: string;
+  ResponseValidationError: string;
+}
+
+export function getErrorUserMessage(
+  apiError: AxiosError<any> | null,
+  errorMessages: Partial<ErrorMessageMapping>
+): string | string[] | null {
+  const defaultMesssage = 'An error occurred. Please try again later.';
+
+  // If there is no error, return null
+  if (apiError === null) {
+    return null;
+  }
+
+  const err = transformError(apiError);
+
+  if (!err) {
+    Sentry.captureException(apiError);
+    return defaultMesssage;
+  }
+
+  if (err instanceof NotAuthorizedError) {
+    return 'You are not authorized to perform this action';
+  }
+  if (err instanceof ResponseValidationError) {
+    return err.parseValidationError();
+  }
+  if (err instanceof UniqueConstraintError) {
+    if (err.message === 'Unique constraint violation') {
+      const messageType = err.constructor.name as keyof ErrorMessageMapping;
+      return errorMessages[messageType] || defaultMesssage;
+    } else {
+      return err.message;
+    }
+  }
+  return defaultMesssage;
+}
+
+export function transformError(apiError: AxiosError<any>) {
+  const error = apiError.response?.data.meta.error;
+
+  if (!error) {
+    Sentry.captureException(apiError);
+  }
+  if (error.code === 'ForbiddenError') {
+    return new NotAuthorizedError('Not authorized');
+  }
+
+  if (error.code === 'ConflictError') {
+    return new UniqueConstraintError(error.message);
+  }
+
+  if (error.code === 'ValidationError') {
+    return new ResponseValidationError('Validation error', error.details);
+  }
+}
+
+export class ResponseValidationError extends BaseError {
+  constructor(message: string, public validationErrors: ValidationError[]) {
+    super(message, { meta: { validationErrors } });
+  }
+
+  parseValidationError(): string[] {
+    const errorMessages: string[] = [];
+    function extractErrors(validationError: ValidationError) {
+      if (validationError.constraints) {
+        for (const constraint in validationError.constraints) {
+          errorMessages.push(validationError.constraints[constraint]);
+        }
+      }
+
+      if (validationError.children) {
+        for (const child of validationError.children) {
+          extractErrors(child);
+        }
+      }
+    }
+
+    for (const detail of this.validationErrors) {
+      extractErrors(detail);
+    }
+
+    return errorMessages;
+  }
+}
+
+export class InternalServerError extends BaseError {
+  constructor() {
+    super('Internal server error');
+  }
+}
+
+export class UniqueConstraintError extends BaseError {
+  constructor(message: string) {
+    super(message);
+  }
+}
+
+export class ResponseClientError extends BaseError {}
+export class FailedLogOutError extends BaseError {}
+export class NotAuthorizedError extends BaseError {}

package/src/errors/index.ts

@@ -0,0 +1,14 @@
+export {
+  InternalServerError,
+  ResponseClientError,
+  ResponseValidationError,
+  FailedLogOutError,
+  NotAuthorizedError,
+  UniqueConstraintError,
+  transformError as defineErrorType,
+  getErrorUserMessage,
+} from './errors';
+
+export type { ErrorMessageMapping } from './errors';
+
+export { BaseError } from './base';

package/src/helpers/camelCaseToSpaces.ts

@@ -0,0 +1,5 @@
+export function camelCaseToSpaces(str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, function (str) {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  });
+}

package/src/helpers/getInitials.ts

@@ -0,0 +1,15 @@
+// TODO: add custom replace option
+export function getInitials(name: string) {
+  const replacedName = name.replace(/[._]/g, ' ');
+  const parts = replacedName.split(' ');
+
+  if (parts.length === 1) {
+    return parts[0].slice(0, 1);
+  }
+  if (parts.length === 2) {
+    return parts[0].slice(0, 1) + parts[1].slice(0, 1);
+  }
+  if (parts.length > 2) {
+    return parts[0].slice(0, 1) + parts[1].slice(0, 1) + parts[2].slice(0, 1);
+  }
+}

package/src/helpers/getSnackbarProvider.tsx

@@ -0,0 +1,57 @@
+import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { SnackbarProvider as Provider, SnackbarProviderProps } from 'notistack';
+import {
+  DefaultSnack,
+  DrawerSnack,
+  NetworkDetectorOnlineSnack,
+  NetworkDetectorOfflineSnack,
+  CookieConsentSnack,
+} from '../components/feedback/snacks';
+
+import { ButtonProps } from '../components';
+import { AlertVariants } from '../styled';
+
+const snackbarOptions: Partial<SnackbarProviderProps> = {
+  anchorOrigin: {
+    horizontal: 'center',
+    vertical: 'top',
+  },
+  autoHideDuration: 8000,
+  hideIconVariant: true,
+  maxSnack: 3,
+  preventDuplicate: true,
+  Components: {
+    default: DefaultSnack,
+    drawer: DrawerSnack,
+    cookieConsent: CookieConsentSnack,
+    networkDetectorOffline: NetworkDetectorOfflineSnack,
+    networkDetectorOnline: NetworkDetectorOnlineSnack,
+  },
+};
+
+export const SnackbarProvider: FC<PropsWithChildren<unknown>> = ({ children }) => (
+  <Provider {...snackbarOptions}>{children}</Provider>
+);
+
+declare module 'notistack' {
+  interface VariantOverrides {
+    /* IMPORTANT: These props need to be kept in sync with the props defined in helpers/getSnackbarProvider */
+    default: {
+      title?: string;
+      button1?: ReactElement<ButtonProps>;
+      button2?: ReactElement<ButtonProps>;
+      type?: AlertVariants;
+      icon?: ReactElement;
+    };
+    drawer: {
+      children: ReactNode | ReactNode[];
+    };
+    cookieConsent: true;
+    networkDetectorOffline: true;
+    networkDetectorOnline: true;
+    info: false;
+    error: false;
+    success: false;
+    warning: false;
+  }
+}

package/src/helpers/getTransition.ts

@@ -0,0 +1,9 @@
+import { Transition } from 'framer-motion';
+
+export function getTransition(): Transition {
+  return {
+    type: 'spring',
+    bounce: 0.35,
+    duration: 0.3,
+  };
+}

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+export { getInitials } from './getInitials';
+export { SnackbarProvider } from './getSnackbarProvider';
+export * from './regexprs';
+export { getTransition } from './getTransition';
+export { camelCaseToSpaces } from './camelCaseToSpaces';

package/src/helpers/makeData.ts

@@ -0,0 +1,34 @@
+import { faker } from '@faker-js/faker';
+
+const range = (len: number) => {
+  const arr = [];
+  for (let i = 0; i < len; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+const newPerson = () => {
+  const statusChance = Math.random();
+  return {
+    firstName: faker.name.firstName(),
+    lastName: faker.name.lastName(),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+  };
+};
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel: any = (depth = 0) => {
+    const len = lens[depth];
+    return range(len).map(() => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      };
+    });
+  };
+  return makeDataLevel();
+}

package/src/helpers/regexprs.ts

@@ -0,0 +1,7 @@
+export const REGEXPR_STEAM_API_KEY = /\w{32}/;
+export const IPV4_REGEX = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
+export const IPV4_AND_PORT_REGEX =
+  /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):([0-9]{1,5})\b/;
+
+export const IPV6_REGEX =
+  /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useLockBodyScroll, useLockRefScroll } from './useLockScroll';
+export { useOutsideAlerter } from './useOutsideAlerter';
+export { useDebounce } from './useDebounce';
+export { useOnScreen } from './useOnScreen';
+export { useLocalStorage } from './useLocalStorage';
+export { useTheme } from './useTheme';
+export { useTableActions } from './useTableActions';
+export { useCallbackRef } from './useCallbackRef';
+export { useFocus } from './useFocus';

package/src/hooks/useCallbackRef.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+/**
+ * Source: RadixUI
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
+}

package/src/hooks/useDebounce.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    /*
+      Cancel the timeout if value changes (also on delay change or unmount)
+      This is how we prevent debounced value from updating if value is changed
+      within the delay period. Timeout gets cleared and restarted.
+    */
+    return (): void => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]); // only recall if value or delay changes.
+
+  return debouncedValue;
+}