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

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

@@ -0,0 +1,22 @@
+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={() => {}}>
+      <Card.Title label="This is the title">
+        <span>Here we can put logic that goes on the right side</span>
+      </Card.Title>
+      <Card.Body>this is the body</Card.Body>
+    </Card>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  padding: ${({ theme }) => theme.spacing[2]};
+  min-width: 20rem;
+`;
+
+export const CardBody: FC<PropsWithChildren> = (props) => {
+  return <Container>{props.children}</Container>;
+};

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

@@ -0,0 +1,29 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: ${({ theme }) => theme.spacing[1]};
+`;
+
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+interface CardTitleProps {
+  label: string;
+}
+
+export const CardTitle: FC<PropsWithChildren<CardTitleProps>> = (props) => {
+  return (
+    <Container>
+      <h2>{props.label}</h2>
+      <Inner>{props.children}</Inner>
+    </Container>
+  );
+};

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

@@ -0,0 +1,58 @@
+import { forwardRef, HTMLProps, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+import { CardTitle } from './CardTitle';
+import { CardBody } from './CardBody';
+
+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};
+  cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
+  height: fit-content;
+
+  &: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;
+}
+
+interface SubComponentTypes {
+  Title: typeof CardTitle;
+  Body: typeof CardBody;
+}
+
+const _Card = forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(
+  { children, variant = 'default', ...props },
+  ref,
+) {
+  const canClick = 'onClick' in props;
+  const { className, ...restProps } = props;
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Container ref={ref} canClick={canClick} variant={variant} className={className} {...restProps}>
+      {children}
+    </Container>
+  );
+});
+
+// TODO: type it correctly instead
+type CardType = typeof _Card & SubComponentTypes;
+export const Card = _Card as CardType;
+
+Card.Title = CardTitle;
+Card.Body = CardBody;

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

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Accordion /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg ktErGV"
+  >
+    <div
+      class="sc-eqUAAy hPeIkm"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,88 @@
+import { FC } from 'react';
+import { Color, 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[6]} auto ${theme.spacing[6]} auto`;
+    }
+  }}
+`;
+
+const Label = styled.label<{
+  position: 'left' | 'center' | 'right';
+  color: Color | 'text' | 'textAlt';
+}>`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  p {
+    color: ${({ theme, color }) => theme.colors[color]};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    font-size: 1.325rem;
+    font-weight: 500;
+    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';
+  color?: Color | 'text' | 'textAlt';
+};
+
+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} color={label.color ? label.color : 'textAlt'}>
+          <p>{label.text}</p>
+        </Label>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,61 @@
+import { styled } from '../../../styled';
+import { FC, ImgHTMLAttributes, useState } from 'react';
+
+const FlagImg = styled.img`
+  width: 1rem;
+  height: 1rem;
+  object-fit: cover;
+  border-radius: 2px;
+`;
+
+const FallbackContainer = styled.div<{ size: number }>`
+  width: ${({ size }) => `${size}rem`};
+  height: ${({ size }) => `${size}rem`};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-radius: 2px;
+  font-size: ${({ size }) => `${size * 0.5}rem`};
+  color: ${({ theme }) => theme.colors.textAlt};
+  font-weight: 600;
+`;
+
+export interface FlagProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+  /** 2-letter ISO country code (e.g., 'US', 'FR', 'JP') */
+  countryCode: string;
+  /** Optional country name for better accessibility */
+  countryName?: string;
+  /** Size of the flag in rem units */
+  size?: number;
+}
+
+export const Flag: FC<FlagProps> = ({ countryCode, countryName, size = 1, style, ...props }) => {
+  const [imageError, setImageError] = useState(false);
+
+  if (!countryCode || countryCode.length !== 2) {
+    return null;
+  }
+
+  const uppercaseCode = countryCode.toUpperCase();
+  const flagUrl = `https://purecatamphetamine.github.io/country-flag-icons/3x2/${uppercaseCode}.svg`;
+  const altText = countryName ? `Flag of ${countryName}` : `Flag of ${uppercaseCode}`;
+
+  if (imageError) {
+    return <FallbackContainer size={size}>{uppercaseCode}</FallbackContainer>;
+  }
+
+  return (
+    <FlagImg
+      src={flagUrl}
+      alt={altText}
+      onError={() => setImageError(true)}
+      style={{
+        width: `${size}rem`,
+        height: `${size}rem`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+};

package/src/components/visual/index.ts

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

package/src/errors/base.ts

@@ -0,0 +1,14 @@
+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,126 @@
+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 BadRequestError) {
+    return err.message;
+  }
+
+  if (err instanceof UniqueConstraintError) {
+    if (err.message === 'Unique constraint violation') {
+      const messageType = err.constructor.name as keyof ErrorMessageMapping;
+      return errorMessages[messageType] || err.message;
+    } 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 === 'BadRequestError') {
+    return new BadRequestError(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 BadRequestError 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/formatNumber.ts

@@ -0,0 +1,6 @@
+export function formatNumber(value: number, decimals: number = 0): string {
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value);
+}

package/src/helpers/getInitials.ts

@@ -0,0 +1,16 @@
+// TODO: add custom replace option
+export function getInitials(name: string) {
+  if (!name) return '?';
+  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: 'right',
+    vertical: 'bottom',
+  },
+  autoHideDuration: 4000,
+  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,6 @@
+export { getInitials } from './getInitials';
+export { SnackbarProvider } from './getSnackbarProvider';
+export * from './regexprs';
+export { getTransition } from './getTransition';
+export { camelCaseToSpaces } from './camelCaseToSpaces';
+export { formatNumber } from './formatNumber';

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.person.firstName(),
+    lastName: faker.person.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,9 @@
+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 FQDN_AND_PORT_REGEX =
+  /^(?=.{4,253}(?::\d{1,5})?$)((?!-)[a-zA-Z0-9-]{1,63}(?<!-)\.)+[a-zA-Z]{2,63}(?::\d{1,5})?$/;
+
+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';