@takaro/lib-components 0.0.10 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",
@@ -15,58 +15,58 @@
     "test:update": "jest --updateSnapshot"
   },
   "devDependencies": {
-    "@hookform/devtools": "^4.2.2",
-    "@mdx-js/react": "^2.1.5",
-    "@types/jest": "^29.0.0",
-    "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.25",
-    "@types/topojson-client": "^3.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@hookform/devtools": "4.3.1",
+    "@mdx-js/react": "3.0.1",
+    "@types/jest": "29.5.13",
+    "@types/react-window": "1.8.8",
+    "@types/styled-components": "5.1.34",
+    "@types/topojson-client": "3.1.5",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "7.6.20"
   },
   "peerDependencies": {
-    "@floating-ui/react": "^0.24.0 || ^0.26.0",
-    "@monaco-editor/react": "^4.4.6",
-    "@rjsf/core": "^5.6.2",
-    "@rjsf/utils": "^5.6.2",
-    "@rjsf/validator-ajv8": "^5.6.2",
-    "@tanstack/react-table": "^8.7.9",
-    "@tanstack/react-router": "1.35.3",
+    "@floating-ui/react": "0.26.24",
+    "@monaco-editor/react": "4.6.0",
+    "@rjsf/core": "5.20.0",
+    "@rjsf/utils": "5.20.0",
+    "@rjsf/validator-ajv8": "5.20.0",
+    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-router": "1.58.15",
     "@types/luxon": "3.4.2",
-    "framer-motion": "^10.16.12 || ^11.0.0",
+    "framer-motion": "11.9.0",
     "luxon": "3.5.0",
-    "notistack": "^3.0.1",
-    "polished": "^4.1.3",
-    "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "@sentry/react": "^8.5.0",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.50.1",
-    "react-icons": "^4.11.0 || ^5.0.0",
-    "react-intersection-observer": "^9.5.1",
-    "react-virtualized-auto-sizer": "^1.0.9",
-    "react-window": "^1.8.8",
-    "simplebar-react": "^3.2.4",
-    "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.2 || ^4.0.0",
-    "@visx/scale": "^3.5.0",
-    "@visx/responsive": "^3.3.0",
-    "@visx/group": "^3.3.0",
-    "@visx/heatmap": "^3.3.0",
-    "@visx/tooltip": "^3.3.0",
-    "@visx/event": "^3.3.0",
-    "@visx/shape": "^3.5.0",
-    "@visx/grid": "^3.5.0",
-    "@visx/vendor": "^3.5.0",
-    "@visx/brush": "^3.6.1",
-    "@visx/axis": "^3.5.0",
+    "notistack": "3.0.1",
+    "polished": "4.3.1",
+    "react": "18.3.1",
+    "react-dnd": "16.0.1",
+    "@sentry/react": "8.32.0",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "7.53.0",
+    "react-icons": "5.3.0",
+    "react-intersection-observer": "9.13.1",
+    "react-virtualized-auto-sizer": "1.0.24",
+    "react-window": "1.8.10",
+    "simplebar-react": "3.2.6",
+    "styled-components": "5.3.11",
+    "web-vitals": "4.2.3",
+    "@visx/scale": "3.5.0",
+    "@visx/responsive": "3.10.2",
+    "@visx/group": "3.3.0",
+    "@visx/heatmap": "3.3.0",
+    "@visx/tooltip": "3.3.0",
+    "@visx/event": "3.3.0",
+    "@visx/shape": "3.5.0",
+    "@visx/grid": "3.5.0",
+    "@visx/vendor": "3.5.0",
+    "@visx/brush": "3.10.4",
+    "@visx/axis": "3.10.1",
     "@visx/pattern": "3.3.0",
-    "@visx/curve": "^3.3.0",
-    "@visx/gradient": "^3.3.0",
-    "@visx/mock-data": "^3.3.0",
+    "@visx/curve": "3.3.0",
+    "@visx/gradient": "3.3.0",
+    "@visx/mock-data": "3.3.0",
     "@visx/geo": "3.5.0",
-    "topojson-client": "^3.1.0"
+    "topojson-client": "3.1.0"
   }
 }

package/src/components/actions/IconButton/index.tsx

@@ -1,5 +1,6 @@
 import { cloneElement, forwardRef, ReactElement } from 'react';
 import { Color, Size } from '../../../styled/types';
+import { Badge } from '../../../components';
 import { Default } from './style';
 
 export interface IconButtonProps {
@@ -35,7 +36,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
   return (
     <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
       {cloneElement(icon, { size: getSize(size) })}
-      {badge && <div>{badge}</div>}
+      {badge && <Badge>{badge}</Badge>}
     </Default>
   );
 });

package/src/components/actions/IconButton/style.ts

@@ -51,25 +51,6 @@ export const Default = styled.button<{ color: Color }>`
     }
   }
 
-  div {
-    background-color: ${({ theme }) => theme.colors.background};
-    color: ${({ theme }) => theme.colors.text};
-    font-size: ${({ theme }) => theme.fontSize.tiny};
-    font-weight: 600;
-    border-radius: ${({ theme }) => theme.borderRadius.small};
-    width: fit-content;
-    height: 1.5rem;
-    line-height: 1.1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: -${({ theme }) => theme.spacing['0_75']};
-    right: -${({ theme }) => theme.spacing['0_75']};
-    padding: ${({ theme }) => theme.spacing['0_25']};
-    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
-  }
-
   svg {
     cursor: pointer;
     fill: ${({ theme }) => theme.colors.text};

package/src/components/data/Table/index.tsx

@@ -38,7 +38,7 @@ export interface TableProps<DataType extends object> {
   isLoading?: boolean;
 
   // currently not possible to type this properly: https://github.com/TanStack/table/issues/4241
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   columns: ColumnDef<DataType, any>[];
 
   /// Renders actions that are always visible
@@ -93,7 +93,19 @@ export function Table<DataType extends object>({
         if (column.id === undefined) {
           throw new Error('ColumnDef must have an id');
         }
-        acc[column.id] = column?.meta?.hiddenColumn ? !column.meta.hiddenColumn : true;
+
+        if (column?.meta?.includeColumn == false) {
+          acc[column.id] = false;
+          return acc;
+        } else {
+          acc[column.id] = true;
+        }
+
+        if (column?.meta?.hideColumn) {
+          acc[column.id] = !column.meta.hideColumn;
+        } else {
+          acc[column.id] = true;
+        }
         return acc;
       },
       {} as Record<string, boolean>,

package/src/components/data/Table/react-table.d.ts

@@ -5,7 +5,10 @@ type DataTypes = 'datetime' | 'number' | 'string' | 'boolean' | 'uuid';
 
 declare module '@tanstack/table-core' {
   interface ColumnMeta<TData extends RowData, TValue> {
-    hiddenColumn?: boolean;
+    /// Column is not visible in table by default, but can be enabled with view options
+    hideColumn?: boolean;
+    canShowColumn?: boolean;
+    includeColumn?: boolean;
     dataType?: DataTypes;
   }
 }

package/src/components/data/Table/subcomponents/ColumnHeader/index.tsx

@@ -72,7 +72,7 @@ export function ColumnHeader<DataType extends object>({ header, table, isLoading
       const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
 
       // Determine mouse position
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
       const clientOffset = monitor.getClientOffset()!;
 
       // Get pixels to the top

package/src/components/data/Table/subcomponents/ColumnVisibility/index.tsx

@@ -18,7 +18,16 @@ export function ColumnVisibility<DataType extends object>({
   openColumnVisibilityTooltip,
   setHasShownColumnVisibilityTooltip,
 }: ColumnVisibilityProps<DataType>) {
-  const viableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide() === true);
+  const viableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide() === true)
+    .filter((column) => {
+      if (column.columnDef.meta?.includeColumn === false) {
+        return false;
+      }
+      return true;
+    });
+
   const hiddenColumns = viableColumns.filter((column) => column.getIsVisible() === false);
 
   return (

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

@@ -1,4 +1,4 @@
-import { forwardRef, MouseEvent, useState } from 'react';
+import { forwardRef, isValidElement, MouseEvent, ReactElement, useState } from 'react';
 import { Container, Grid, IconContainer, ButtonContainer } from './style';
 import {
   AiFillCheckCircle as Success,
@@ -20,14 +20,15 @@ type Action = {
 export interface AlertProps {
   variant: AlertVariants;
   title?: string;
-  text?: string | string[];
+  text?: string | string[] | ReactElement;
   elevation?: Elevation;
   dismiss?: boolean;
   action?: Action;
+  showIcon?: boolean;
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action },
+  { variant, title, text, dismiss = false, elevation = 4, action, showIcon = true },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
@@ -39,7 +40,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     e.stopPropagation();
     action?.execute();
   };
-
   const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -58,6 +58,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
         return <Info size={24} />;
     }
   }
+
+  function renderText() {
+    if (isValidElement(text)) {
+      return text;
+    }
+
+    if (typeof text === 'string') {
+      return <p>{text}</p>;
+    } else if (Array.isArray(text)) {
+      return <ul>{text?.map((message) => <li key={'message-' + message}>{message}</li>)}</ul>;
+    }
+  }
+
   return (
     <AnimatePresence>
       {visible && (
@@ -72,8 +85,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           ref={ref}
           role="status"
         >
-          <Grid hasTitle={hasTitle}>
-            <IconContainer variant={variant}>{getIcon()}</IconContainer>
+          <Grid hasTitle={hasTitle} showIcon={showIcon}>
+            {showIcon && <IconContainer variant={variant}>{getIcon()}</IconContainer>}
 
             {/* If title is declared set title, otherwise put everything on single line */}
             {title && (
@@ -82,25 +95,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
                 <div />
               </>
             )}
-            {typeof text === 'string' ? (
-              <p>{text}</p>
-            ) : (
-              text && (
-                <ul>
-                  {text.map((message) => (
-                    <li key={'message-' + message}>{message}</li>
-                  ))}
-                </ul>
-              )
-            )}
+            {renderText()}
             {hasTitle ? <div /> : null}
             <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
               {action && (
-                <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
-              )}
-              {dismiss && (
-                <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
+                <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}
+              {dismiss && <Button size="tiny" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />}
             </ButtonContainer>
           </Grid>
         </Container>

package/src/components/feedback/Alert/style.ts

@@ -58,10 +58,15 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div<{ hasTitle: boolean }>`
+export const Grid = styled.div<{ hasTitle: boolean; showIcon: boolean }>`
   display: grid;
-  grid-template-columns: ${({ theme, hasTitle }) =>
-    !hasTitle ? `${theme.spacing[5]} 1fr fit-content(100px)` : `${theme.spacing[5]} 1fr`};} 
+  grid-template-columns: ${({ theme, hasTitle, showIcon }) => {
+    const result = '';
+    if (showIcon) result.concat(`${theme.spacing[5]}`);
+    result.concat(' 1fr');
+    if (hasTitle) result.concat(' fit-content(100px)');
+    return result;
+  }}
   align-items: center;
   gap: ${({ theme, hasTitle }) => (hasTitle ? 0 : theme.spacing['0_5'])};
 `;
@@ -83,5 +88,6 @@ export const ButtonContainer = styled.div<{
 }>`
   display: ${({ show }): string => (show ? 'flex' : 'none')};
   align-items: center;
+  white-space: nowrap;
   margin-top: ${({ theme, hasTitle }): string => (hasTitle ? theme.spacing['1'] : theme.spacing[0])};
 `;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Badge, BadgeProps } from '.';
+
+export default {
+  title: 'Feedback/Badge',
+  component: Badge,
+  args: {
+    variant: 'warning',
+    animate: false,
+  },
+} as Meta<BadgeProps>;
+
+export const Default: StoryFn<BadgeProps> = (args) => (
+  <div>
+    <h2 style={{ backgroundColor: 'orange', position: 'relative', width: 'fit-content' }}>
+      this is the title{' '}
+      <Badge variant={args.variant} animate={args.animate}>
+        here
+      </Badge>
+    </h2>
+  </div>
+);

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

@@ -0,0 +1,47 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { pulseAnimation, styled } from '../../../styled';
+import { AlertVariants, Color } from '../../../styled';
+import { shade } from 'polished';
+
+type ColorVariant = AlertVariants | Color | 'default';
+
+const Container = styled.div<{ variant: ColorVariant; animate: boolean }>`
+  background-color: ${({ theme, variant }) =>
+    variant === 'default' ? theme.colors.background : shade('0.8', theme.colors[variant])};
+  color: ${({ theme, variant }) => (variant === 'default' ? theme.colors.text : theme.colors[variant])};
+  font-size: ${({ theme }) => theme.fontSize.tiny};
+  font-weight: 600;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  width: fit-content;
+  height: 1.5rem;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -${({ theme }) => theme.spacing['1']};
+  right: -${({ theme }) => theme.spacing['0_75']};
+  padding: ${({ theme }) => theme.spacing['0_25']};
+  border: 1px solid
+    ${({ theme, variant }) => (variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant])};
+
+  animation: ${({ animate, variant, theme }) =>
+      animate ? pulseAnimation(variant === 'default' ? theme.colors.backgroundAccent : theme.colors[variant]) : 'none'}
+    5s infinite ease-in-out;
+`;
+
+export interface BadgeProps {
+  variant?: ColorVariant;
+  animate?: boolean;
+}
+
+export const Badge = forwardRef<HTMLDivElement, PropsWithChildren<BadgeProps>>(function Badge(
+  { variant = 'default', children, animate = false },
+  ref,
+) {
+  return (
+    <Container ref={ref} variant={variant} animate={animate}>
+      {children}
+    </Container>
+  );
+});

package/src/components/feedback/index.ts

@@ -31,3 +31,6 @@ export type { ErrorPageProps } from './ErrorPage';
 
 export { FormError } from './FormError';
 export type { FormErrorProps } from './FormError';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';

package/src/components/inputs/DurationField/Duration.stories.tsx

@@ -3,6 +3,7 @@ import { DurationField, DurationFieldProps } from '../../../components';
 import { z } from 'zod';
 import { StoryFn, Meta } from '@storybook/react';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 
 export default {
   title: 'Inputs/DurationField',
@@ -26,7 +27,9 @@ export const Default: StoryFn<DurationFieldProps> = (args) => {
     duration: z.number().positive(),
   });
 
-  const { control, handleSubmit } = useForm<z.infer<typeof validationSchema>>();
+  const { control, handleSubmit } = useForm<z.infer<typeof validationSchema>>({
+    resolver: zodResolver(validationSchema),
+  });
   const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = ({ duration }) => {
     setResult(duration);
   };

package/src/components/inputs/selects/index.tsx

@@ -42,7 +42,6 @@ export const getLabelFromChildren = (children: ReactNode, value: string) => {
     }
   }
 
-  // eslint-disable-next-line no-console
   console.error(
     `No label found for value ${value}. This occurs when a value is passed through the defaultValue prop of useForm, but the value is not present in the options.`,
   );

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

@@ -6,6 +6,13 @@ const Container = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing['1']};
   hyphens: auto;
 
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: 10px 5px 0px 5px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
   p {
     hypens: auto;
   }

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

@@ -22,6 +22,18 @@ const Container = styled.button<{ open: boolean }>`
   margin-bottom: ${({ theme, open }) => (!open ? theme.spacing['1'] : theme.spacing['0_5'])};
   border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
   color: ${({ theme }) => theme.colors.textAlt};
+  font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+
+  ${({ open }) => {
+    if (open) {
+      return `
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-bottom: 0;
+      `;
+    }
+  }}
 
   svg {
     fill: ${({ theme }) => theme.colors.textAlt};

package/src/helpers/getInitials.ts

@@ -1,5 +1,6 @@
 // TODO: add custom replace option
 export function getInitials(name: string) {
+  if (!name) return '?';
   const replacedName = name.replace(/[._]/g, ' ');
   const parts = replacedName.split(' ');
 

package/src/hooks/useLocalStorage.tsx

@@ -8,7 +8,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error('Error reading the local storage value', e);
       return initialValue;
     }
@@ -24,11 +23,9 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
     } catch (e) {
       // DOMException code 22 for QuotaExceededError
       if (e instanceof DOMException && e.name === 'QuotaExceededError') {
-        // eslint-disable-next-line no-console
         console.error('LocalStorage quota exceeded', e);
         setError(e);
       } else {
-        // eslint-disable-next-line no-console
         console.error('Error setting the local storage value', e);
       }
     }