@takaro/lib-components 0.0.1 → 0.0.5

package/src/components/navigation/Steppers/context.tsx

@@ -31,11 +31,11 @@ export const useStepper = () => {
   const decrementCurrentStep = useCallback(() => dispatch({ type: stepTypes.DECREMENT_CURRENT_STEP }), [dispatch]);
   const setSteps = useCallback(
     (steps: ReactNode[]) => dispatch({ type: stepTypes.SET_STEPS, payload: { steps } }),
-    [dispatch]
+    [dispatch],
   );
   const setCurrentStep = useCallback(
     (amount: number) => dispatch({ type: stepTypes.SET_CURRENT_STEP, payload: { amount } }),
-    [dispatch]
+    [dispatch],
   );
 
   return {

package/src/components/navigation/Tabs/Content.tsx

@@ -16,7 +16,10 @@ const variants = {
   hidden: { opacity: 0, x: '20px' },
 };
 
-export const Content = forwardRef<HTMLDivElement, PropsWithChildren<ContentProps>>(({ children, value }, ref) => {
+export const Content = forwardRef<HTMLDivElement, PropsWithChildren<ContentProps>>(function TabsContent(
+  { children, value },
+  ref,
+) {
   const { value: selectedValue } = useTabsContext();
 
   const isHidden = value !== selectedValue;

package/src/components/navigation/Tabs/Trigger.tsx

@@ -37,29 +37,30 @@ interface TriggerProps {
   disabled?: boolean;
 }
 
-export const Trigger = forwardRef<HTMLButtonElement, PropsWithChildren<TriggerProps>>(
-  ({ children, disabled, value }, ref) => {
-    const { setValue, value: selectedValue } = useTabsContext();
+export const Trigger = forwardRef<HTMLButtonElement, PropsWithChildren<TriggerProps>>(function TabsTrigger(
+  { children, disabled, value },
+  ref,
+) {
+  const { setValue, value: selectedValue } = useTabsContext();
 
-    const handleClick = () => {
-      if (disabled) return;
-      setValue(value);
-    };
+  const handleClick = () => {
+    if (disabled) return;
+    setValue(value);
+  };
 
-    const isActive = value === selectedValue;
+  const isActive = value === selectedValue;
 
-    return (
-      <Container
-        role="tab"
-        ref={ref}
-        onClick={handleClick}
-        disabled={disabled}
-        isActive={isActive}
-        aria-selected={isActive}
-        aria-controls={`tab-content-${value}`}
-      >
-        {children}
-      </Container>
-    );
-  }
-);
+  return (
+    <Container
+      role="tab"
+      ref={ref}
+      onClick={handleClick}
+      disabled={disabled}
+      isActive={isActive}
+      aria-selected={isActive}
+      aria-controls={`tab-content-${value}`}
+    >
+      {children}
+    </Container>
+  );
+});

package/src/components/navigation/index.ts

@@ -10,7 +10,7 @@ export { IconNav } from './IconNav';
 export type { IconNavProps } from './IconNav';
 
 export { HorizontalNav } from './HorizontalNav';
-export type { HorizontalNavProps, HorizontalNavLink } from './HorizontalNav';
+export type { HorizontalNavProps } from './HorizontalNav';
 
 export { Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';

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

@@ -1,7 +1,6 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Action, ActionMenu, ActionMenuProps } from '.';
-import { useEffect, useState } from 'react';
 import { styled } from '../../../styled';
 import { useOutsideAlerter } from '../../../hooks';
 import { useFloating } from '@floating-ui/react';

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

@@ -14,36 +14,37 @@ export interface ActionMenuProps {
   elevation?: Elevation;
 }
 
-export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(
-  ({ attributes, children, selectedState, elevation = 4 }, ref) => {
-    const [selected, setSelected] = selectedState;
+export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function ActionMenu(
+  { attributes, children, selectedState, elevation = 4 },
+  ref,
+) {
+  const [selected, setSelected] = selectedState;
 
-    return (
-      <Container
-        elevation={elevation}
-        style={{
-          position: attributes.strategy,
-          top: attributes.y ? attributes.y + 5 : 0,
-          left: attributes.x ?? 0,
-        }}
-        ref={ref}
-      >
-        {Children.map(children, (child: ReactElement<ActionProps>, idx) => (
-          <Item onClick={() => setSelected(idx)}>
-            {child}
-            {selected === idx ? (
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <CheckMarkIcon size={15} />
-              </div>
-            ) : (
-              <div className="checkmark-placeholder"></div>
-            )}
-          </Item>
-        ))}
-      </Container>
-    );
-  }
-);
+  return (
+    <Container
+      elevation={elevation}
+      style={{
+        position: attributes.strategy,
+        top: attributes.y ? attributes.y + 5 : 0,
+        left: attributes.x ?? 0,
+      }}
+      ref={ref}
+    >
+      {Children.map(children, (child: ReactElement<ActionProps>, idx) => (
+        <Item onClick={() => setSelected(idx)}>
+          {child}
+          {selected === idx ? (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <CheckMarkIcon size={15} />
+            </div>
+          ) : (
+            <div className="checkmark-placeholder"></div>
+          )}
+        </Item>
+      ))}
+    </Container>
+  );
+});
 
 interface ActionProps {
   onClick: () => unknown;

package/src/components/other/Collapsible/CollapsibleTrigger.tsx

@@ -29,7 +29,10 @@ const Container = styled.button<{ open: boolean }>`
 `;
 
 export type TriggerProps = HTMLProps<HTMLElement> & PropsWithChildren<{ asChild?: boolean }>;
-export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(({ children, asChild }, ref) => {
+export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(function CollapsibleTrigger(
+  { children, asChild },
+  ref,
+) {
   const { setOpen, open } = useCollapsibleContext();
 
   const handleClick = () => {
@@ -37,9 +40,11 @@ export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(({ child
   };
 
   if (asChild && isValidElement(children)) {
-    const existingOnClick = children.props.onClick;
+    const hasOnClick = children.props.onClick;
     const mergedOnClick = () => {
-      existingOnClick && existingOnClick();
+      if (hasOnClick) {
+        hasOnClick();
+      }
       handleClick();
     };
 
@@ -47,7 +52,6 @@ export const CollapsibleTrigger = forwardRef<HTMLElement, TriggerProps>(({ child
       onClick: mergedOnClick,
       role: 'button',
     });
-  } else {
   }
 
   return (

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

@@ -12,34 +12,33 @@ export interface CompanyProps {
   to?: string;
 }
 
-export const Company = forwardRef<HTMLDivElement, CompanyProps>(
-  ({ iconColor = 'primary', iconVisible = true, textVisible = true, to, size = 'medium' }, ref) => {
-    if (to) {
-      return (
-        <Container size={size} textVisible={textVisible} ref={ref}>
-          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-          {/* @ts-ignore reusable link */}
-          <Link to={to}>
-            {iconVisible && (
-              <Svg color={iconColor} size={size} viewBox="0 0 512 512">
-                <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
-              </Svg>
-            )}
-            {textVisible && <div>Takaro</div>}
-          </Link>
-        </Container>
-      );
-    }
-
+export const Company = forwardRef<HTMLDivElement, CompanyProps>(function Company(
+  { iconColor = 'primary', iconVisible = true, textVisible = true, to, size = 'medium' },
+  ref,
+) {
+  if (to) {
     return (
       <Container size={size} textVisible={textVisible} ref={ref}>
-        {iconVisible && (
-          <Svg color={iconColor} size={size} viewBox="0 0 512 512">
-            <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
-          </Svg>
-        )}
-        {textVisible && <div>Takaro</div>}
+        <Link to={to}>
+          {iconVisible && (
+            <Svg color={iconColor} size={size} viewBox="0 0 512 512">
+              <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
+            </Svg>
+          )}
+          {textVisible && <div>Takaro</div>}
+        </Link>
       </Container>
     );
   }
-);
+
+  return (
+    <Container size={size} textVisible={textVisible} ref={ref}>
+      {iconVisible && (
+        <Svg color={iconColor} size={size} viewBox="0 0 512 512">
+          <path d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z" />
+        </Svg>
+      )}
+      {textVisible && <div>Takaro</div>}
+    </Container>
+  );
+});

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

@@ -10,7 +10,7 @@ export default {
   args: {
     header: 'Earn recurring revenue',
     description: 'Subscriptions allow you to grow recurring revenue by charging subscribers on a regular basis',
-    actions: [<Button size="medium" icon={<AddIcon />} text="New project" />],
+    actions: [<Button key="new-project-button " size="medium" icon={<AddIcon />} text="New project" />],
     size: 'medium',
   },
 } as Meta<EmptyProps>;

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

@@ -1,6 +1,5 @@
 import { FC, ReactElement } from 'react';
 import { Size, styled } from '../../../styled';
-import { AiOutlineContainer as Icon } from 'react-icons/ai';
 
 const Container = styled.div<{ size: Size }>`
   display: flex;
@@ -56,7 +55,7 @@ const ActionContainer = styled.div`
 const Description = styled.p`
   max-width: 300px;
   margin: 0.5rem auto 1rem auto;
-  color: ${({ theme }) => theme.colors.textAlt};
+  color: ${({ theme }) => theme.colors.text};
   text-align: center;
 `;
 
@@ -78,7 +77,6 @@ export interface EmptyProps {
 export const Empty: FC<EmptyProps> = ({ description = 'No Data', header, actions, size = 'medium' }) => {
   return (
     <Container size={size}>
-      <Icon size={40} />
       <h2>{header}</h2>
       <Description>{description}</Description>
       <ActionContainer>{actions}</ActionContainer>

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

@@ -12,7 +12,7 @@ export interface PermissionsGuardProps {
 
 export const hasPermissionHelper = (
   userPermissions: PERMISSIONS[],
-  requiredPermissions: RequiredPermissions
+  requiredPermissions: RequiredPermissions,
 ): boolean => {
   if (userPermissions.includes(PERMISSIONS.Root)) {
     return true;
@@ -20,7 +20,7 @@ export const hasPermissionHelper = (
   return requiredPermissions.some((permissionSet) =>
     Array.isArray(permissionSet)
       ? permissionSet.every((permission) => userPermissions.includes(permission))
-      : userPermissions.includes(permissionSet as PERMISSIONS)
+      : userPermissions.includes(permissionSet as PERMISSIONS),
   );
 };
 

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

@@ -32,7 +32,10 @@ export interface CardProps extends HTMLProps<HTMLDivElement> {
 }
 
 // Forward ref and spread all props to the Container
-export const Card = forwardRef<HTMLDivElement, CardProps>(({ children, variant = 'default', ...props }, ref) => {
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { children, variant = 'default', ...props },
+  ref,
+) {
   const canClick = 'onClick' in props;
 
   // Extract the className prop, if present

package/src/errors/base.ts

@@ -3,7 +3,10 @@ interface IErrorOptions {
 }
 
 export class BaseError extends Error {
-  constructor(public message: string, protected options?: Partial<IErrorOptions>) {
+  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

@@ -11,7 +11,7 @@ export interface ErrorMessageMapping {
 
 export function getErrorUserMessage(
   apiError: AxiosError<any> | null,
-  errorMessages: Partial<ErrorMessageMapping>
+  errorMessages: Partial<ErrorMessageMapping>,
 ): string | string[] | null {
   const defaultMesssage = 'An error occurred. Please try again later.';
 
@@ -33,6 +33,10 @@ export function getErrorUserMessage(
   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;
@@ -58,13 +62,20 @@ export function transformError(apiError: AxiosError<any>) {
     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[]) {
+  constructor(
+    message: string,
+    public validationErrors: ValidationError[],
+  ) {
     super(message, { meta: { validationErrors } });
   }
 
@@ -104,6 +115,12 @@ export class UniqueConstraintError extends BaseError {
   }
 }
 
+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/helpers/getSnackbarProvider.tsx

@@ -13,10 +13,10 @@ import { AlertVariants } from '../styled';
 
 const snackbarOptions: Partial<SnackbarProviderProps> = {
   anchorOrigin: {
-    horizontal: 'center',
-    vertical: 'top',
+    horizontal: 'right',
+    vertical: 'bottom',
   },
-  autoHideDuration: 8000,
+  autoHideDuration: 4000,
   hideIconVariant: true,
   maxSnack: 3,
   preventDuplicate: true,

package/src/helpers/regexprs.ts

@@ -2,6 +2,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 FQDN_REGEX = /(?=^.{4,253}$)(^((?!-)[a-zA-Z0-9-]{1,63}(?<!-)\.)+[a-zA-Z]{2,63}$)/;
 
 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/useFocus.tsx

@@ -3,7 +3,9 @@ import { useRef } from 'react';
 export const useFocus = () => {
   const htmlElRef = useRef<HTMLElement>(null);
   const setFocus = () => {
-    htmlElRef.current && htmlElRef.current.focus();
+    if (htmlElRef.current) {
+      htmlElRef.current.focus();
+    }
   };
 
   return [htmlElRef, setFocus];

package/src/hooks/useOnScreen.ts

@@ -10,7 +10,7 @@ export function useOnScreen(ref: React.RefObject<any>, rootMargin = '0px'): bool
       },
       {
         rootMargin,
-      }
+      },
     );
     if (ref.current) {
       observer.observe(ref.current);

package/src/hooks/useTableActions.ts

@@ -14,8 +14,8 @@ export interface PageOptions {
 }
 
 interface TableActionOptions {
-  pageIndex: number;
-  pageSize: number;
+  pageIndex?: number;
+  pageSize?: number;
 }
 
 export interface ColumnFilter {
@@ -23,10 +23,15 @@ export interface ColumnFilter {
   value: string[];
 }
 
-export function useTableActions<T>({ pageIndex, pageSize }: TableActionOptions = { pageIndex: 0, pageSize: 9 }) {
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_INDEX = 0;
+
+export function useTableActions<T>(
+  { pageIndex, pageSize }: TableActionOptions = { pageIndex: DEFAULT_PAGE_INDEX, pageSize: DEFAULT_PAGE_SIZE },
+) {
   const [paginationState, setPaginationState] = useState<PaginationState>({
-    pageIndex,
-    pageSize,
+    pageIndex: pageIndex ?? DEFAULT_PAGE_INDEX,
+    pageSize: pageSize ?? DEFAULT_PAGE_SIZE,
   });
   const [columnFiltersState, setColumnFiltersState] = useState<ColumnFilter[]>([]);
   const [columnSearchState, setColumnSearchState] = useState<ColumnFilter[]>([]);

package/src/styled/GlobalStyle.ts

@@ -49,7 +49,7 @@ export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
     overflow: hidden;
   }
 
-  a, p, div, ul, li, h1, h2, h3, h4, h5, h6, header, footer, fieldset, legend, dl, dt{
+  a, p, div, ul, li, h1, h2, h3, h4, h5, h6, header, footer, fieldset, legend, dl, dt, dd{
     transition: background-color 0.2s linear;
     transition: box-shadow 0.125s linear;
     margin: 0;
@@ -94,6 +94,7 @@ export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
   }
 
   input, textarea {
+    appearance: none;
     box-sizing: border-box;
     margin: 0;
     outline: 0;

package/src/styled/zIndex.ts

@@ -27,5 +27,5 @@ export const zIndex = types.reduce(
     acc[type] = baseValue + index;
     return acc;
   },
-  {} as Record<ComponentType, number> // initialize obj with correct type
+  {} as Record<ComponentType, number>, // initialize obj with correct type
 );

package/src/test/testUtils.tsx

@@ -18,6 +18,9 @@ const Providers: FC<PropsWithChildren<unknown>> = ({ children }) => {
     <ThemeProvider theme={lightTheme}>
       <SnackbarProvider>
         <GlobalStyle />
+        {/* I do not understand the following error but since this is a test file, doing a quick-fix :tm: */}
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore - This is throwing a type error in the build but not in vscode... */}
         <RouterProvider router={router} />
       </SnackbarProvider>
     </ThemeProvider>

package/src/components/data/Table/subcomponents/index.ts

@@ -1,4 +0,0 @@
-export { Pagination } from './Pagination';
-export { Filter } from './Filter';
-export { ColumnHeader } from './ColumnHeader';
-export { ColumnVisibility } from './ColumnVisibility';