@takaro/lib-components 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.11",
+  "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

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/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/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);
       }
     }