@takaro/lib-components 0.0.15 → 0.0.18

package/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:20.18.0-alpine AS build
+FROM node:22.11.0-alpine AS build
 
 ENV NODE_ENV=development
 WORKDIR /app

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "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",
@@ -9,10 +9,8 @@
   "scripts": {
     "build": "storybook build -c ../../.storybook",
     "start:dev": "NODE_OPTIONS='' storybook dev -c ../../.storybook -p 13002",
-    "_test": "jest",
     "test:unit": "CI=true vitest",
-    "test:watch": "jest --watch",
-    "test:update": "jest --updateSnapshot"
+    "test:snapshot": "vitest -u"
   },
   "devDependencies": {
     "@hookform/devtools": "4.3.1",
@@ -31,9 +29,9 @@
     "@rjsf/core": "5.20.0",
     "@rjsf/utils": "5.20.0",
     "@rjsf/validator-ajv8": "5.20.0",
-    "@sentry/react": "8.32.0",
+    "@sentry/react": "8.53.0",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-router": "1.58.15",
+    "@tanstack/react-router": "1.102.1",
     "@types/luxon": "3.4.2",
     "@visx/axis": "3.10.1",
     "@visx/brush": "3.10.4",
@@ -51,7 +49,7 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@visx/vendor": "3.5.0",
-    "@visx/zoom": "^3.3.0",
+    "@visx/zoom": "3.3.0",
     "framer-motion": "11.9.0",
     "luxon": "3.5.0",
     "notistack": "3.0.1",

package/src/components/actions/Button/Button.test.tsx

@@ -1,5 +1,6 @@
 import { Button } from '.';
-import { render } from 'test-utils';
+import { expect, it } from 'vitest';
+import { render } from '../../../test/testUtils';
 
 it('Should render <Button/>', () => {
   const { container } = render(<Button text="button text" />);

package/src/components/actions/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Button/> 1`] = `
+<div>
+  <button
+    class="sc-jlGgGc iqEzFy"
+    color="primary"
+    tabindex="0"
+    type="button"
+  >
+     
+    <span>
+      button text
+    </span>
+     
+  </button>
+</div>
+`;

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

@@ -34,6 +34,7 @@ export const Default = styled.button<{
   span {
     font-size: 1.25rem;
     font-weight: 600;
+    white-space: nowrap;
     color: ${({ theme, color }) => {
       switch (color) {
         case 'white':

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

@@ -1,9 +1,11 @@
-import { FC, useState, useEffect, ReactElement, useRef } from 'react';
+import { useState, useEffect, ReactElement, useRef, forwardRef } from 'react';
 import { useOutsideAlerter } from '../../../hooks';
 import { MdChevronRight as ArrowIcon } from 'react-icons/md';
 import { ActionMenu } from '../../../components';
 import { styled } from '../../../styled';
-import { useFloating } from '@floating-ui/react';
+import { useFloating, useMergeRefs } from '@floating-ui/react';
+import { shade } from 'polished';
+import { ButtonColor } from '../Button/style';
 
 const Arrow = styled(ArrowIcon)`
   transform: rotate(90deg);
@@ -12,7 +14,7 @@ const Arrow = styled(ArrowIcon)`
 
 const Wrapper = styled.div``;
 
-const DropdownActionContainer = styled.div<{ isVisible: boolean }>`
+const DropdownActionContainer = styled.div<{ color: ButtonColor }>`
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -20,94 +22,107 @@ const DropdownActionContainer = styled.div<{ isVisible: boolean }>`
   justify-content: center;
   cursor: pointer;
   width: 3.2rem;
-  border: .1rem solid ${({ theme, isVisible }) => (isVisible ? theme.colors.primary : theme.colors.backgroundAccent)}};
+
+  background: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+  border: .1rem solid ${({ theme, color }) => theme.colors[color === 'background' ? 'backgroundAccent' : color]}};
   border-top-right-radius: ${({ theme }) => theme.borderRadius.small}};
   border-bottom-right-radius: ${({ theme }) => theme.borderRadius.small}};
-  
 
-  &:hover {
-    border-color:${({ theme }) => theme.colors.primary};
-    svg {
-      fill: ${({ theme }) => theme.colors.primary};
-    }
+  svg {
+    fill: ${({ theme }) => theme.colors.text};
   }
   &:active {
     background-color: transparent;
   }
 `;
 
-const CurrentAction = styled.div`
+const CurrentAction = styled.div<{ color: ButtonColor }>`
   padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing[1]}`};
   font-weight: 500;
   cursor: pointer;
   min-width: 10rem;
   height: 100%;
   color: ${({ theme }) => theme.colors.text};
-  border-top: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
-  border-left: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
-  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
+  width: calc(100% - 3.2rem);
+  white-space: nowrap;
+
+  background: ${({ theme, color }) => shade(0.5, theme.colors[color])};
+  border-top: 0.1rem solid ${({ theme, color }) => theme.colors[color === 'background' ? 'backgroundAccent' : color]};
+  border-left: 0.1rem solid ${({ theme, color }) => theme.colors[color === 'background' ? 'backgroundAccent' : color]};
+  border-bottom: 0.1rem solid ${({ theme, color }) => theme.colors[color === 'background' ? 'backgroundAccent' : color]};
   border-top-left-radius: ${({ theme }) => theme.borderRadius.small};
   border-bottom-left-radius: ${({ theme }) => theme.borderRadius.small};
 
   text-align: center;
-  &:hover {
-    color: ${({ theme }) => theme.colors.primary};
-    border-color: ${({ theme }) => theme.colors.primary};
-  }
   &:active {
     background-color: transparent;
   }
 `;
 
-const Container = styled.div`
+const Container = styled.div<{ fullWidth: boolean }>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   border-radius: ${({ theme }) => theme.borderRadius.large};
-  width: max-content;
-
-  &:hover ${DropdownActionContainer} {
-    border-left-color: ${({ theme }) => theme.colors.primary};
-  }
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'max-content')};
 `;
 
 export interface DropdownButtonProps {
   children: ReactElement[];
+  color?: ButtonColor;
+  onSelectedChanged?: (index: number) => void;
+  fullWidth?: boolean;
 }
 
-export const DropdownButton: FC<DropdownButtonProps> = ({ children }) => {
-  const [visible, setVisible] = useState<boolean>(false);
+export const DropdownButton = forwardRef<HTMLDivElement, DropdownButtonProps>(function Dropdown(
+  { children, color = 'primary', onSelectedChanged, fullWidth = false },
+  propRef,
+) {
+  const [listVisible, setListVisible] = useState<boolean>(false);
   const [selected, setSelected] = useState<number>(0);
   const { x, y, refs, strategy } = useFloating();
 
   const parentRef = useRef<HTMLDivElement>(null);
+  const ref = useMergeRefs([propRef, parentRef]);
 
   useOutsideAlerter(parentRef, () => {
-    setVisible(false);
+    setListVisible(false);
   });
 
   useEffect(() => {
-    setVisible(false);
+    if (onSelectedChanged) {
+      onSelectedChanged(selected);
+    }
+    setListVisible(false);
   }, [selected]);
 
   const handleSelectedActionClicked = () => {
-    setVisible(false);
+    setListVisible(false);
     children[selected].props.onClick();
   };
 
+  // TODO: this element does not handle the case where there are no children/actions
+
   return (
-    <Wrapper ref={parentRef}>
-      <Container ref={refs.setReference}>
-        <CurrentAction onClick={handleSelectedActionClicked}>{children[selected].props.text}</CurrentAction>
-        <DropdownActionContainer onClick={() => setVisible(!visible)} isVisible={visible}>
+    <Wrapper ref={ref}>
+      <Container ref={refs.setReference} fullWidth={fullWidth}>
+        <CurrentAction color={color} onClick={handleSelectedActionClicked} role="button">
+          {children[selected].props.text}
+        </CurrentAction>
+        <DropdownActionContainer role="button" color={color} onClick={() => setListVisible(!listVisible)}>
           <Arrow size={20} />
         </DropdownActionContainer>
-        {visible && (
-          <ActionMenu selectedState={[selected, setSelected]} attributes={{ x, y, strategy }} ref={refs.setFloating}>
+        {listVisible && (
+          <ActionMenu
+            selected={selected}
+            setSelected={(s) => setSelected(s)}
+            attributes={{ x, y, strategy }}
+            ref={refs.setFloating}
+          >
             {children}
           </ActionMenu>
         )}
       </Container>
     </Wrapper>
   );
-};
+});

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

@@ -1,7 +1,8 @@
 import { IconButton } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <IconButton />', () => {
-  const { container } = render(<IconButton icon={<div>icon</div>} />);
+  const { container } = render(<IconButton icon={<div>icon</div>} ariaLabel="test" />);
   expect(container).toMatchSnapshot();
 });

package/src/components/actions/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <IconButton /> 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="sc-lmUcrn bKlaHv"
+    color="primary"
+    type="button"
+  >
+    <div
+      size="18"
+    >
+      icon
+    </div>
+  </button>
+</div>
+`;

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

@@ -0,0 +1,16 @@
+import { Size } from '../../../styled/types';
+
+export const getIconSize = (size: Size) => {
+  switch (size) {
+    case 'tiny':
+      return 15;
+    case 'small':
+      return 16;
+    case 'medium':
+      return 18;
+    case 'large':
+      return 20;
+    case 'huge':
+      return 24;
+  }
+};

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

@@ -2,6 +2,7 @@ import { cloneElement, forwardRef, ReactElement } from 'react';
 import { Color, Size } from '../../../styled/types';
 import { Badge } from '../../../components';
 import { Default } from './style';
+import { getIconSize } from './getIconSize';
 
 export interface IconButtonProps {
   size?: Size;
@@ -14,28 +15,13 @@ export interface IconButtonProps {
   badge?: string;
 }
 
-const getSize = (size: Size) => {
-  switch (size) {
-    case 'tiny':
-      return 15;
-    case 'small':
-      return 16;
-    case 'medium':
-      return 18;
-    case 'large':
-      return 20;
-    case 'huge':
-      return 24;
-  }
-};
-
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
   { icon, color = 'primary', size = 'medium', disabled, onClick = () => {}, ariaLabel, badge },
   ref,
 ) {
   return (
     <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
-      {cloneElement(icon, { size: getSize(size) })}
+      {cloneElement(icon, { size: getIconSize(size) })}
       {badge && <Badge>{badge}</Badge>}
     </Default>
   );

package/src/components/actions/ToggleButton/ToggleButtonGroup.tsx

@@ -47,7 +47,6 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
     const m = new Map<string, boolean>();
     Children.forEach(children, (child) => {
       if (isValidElement(child)) {
-        console.log(child.props.value, defaultValue);
         if (child.props.value === defaultValue) {
           m.set(child.props.value, true);
         } else {

package/src/components/charts/GeoMercator/index.tsx

@@ -84,9 +84,9 @@ const Chart = <T,>({
   const theme = useTheme();
   const { hideTooltip, showTooltip, tooltipData, tooltipLeft = 0, tooltipTop = 0 } = useTooltip<T>();
 
-  const centerX = width / 2 + 50;
-  const centerY = height / 2 + 150;
-  const scale = (width / 1000) * 100;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const scale = Math.min(width, height) * 0.25;
 
   const colorScale = scaleLinear({
     domain: [Math.min(...data.map((d) => yAccessor(d))), Math.max(...data.map((d) => yAccessor(d)))],

package/src/components/charts/RadialBarChart/index.tsx

@@ -12,7 +12,7 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import localPoint from '@visx/event/lib/localPointGeneric';
 import { useGradients } from '../useGradients';
 
-export const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
 export interface RadialBarChartProps<T> {
   name: string;
   data: T[];

package/src/components/data/Chip/Chip.test.tsx

@@ -1,7 +1,8 @@
 import { Chip } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
 
 it('Should render <Chip/>', () => {
-  const { container } = render(<Chip label="chip label" />);
+  const { container } = render(<Chip variant="outline" label="chip label" />);
   expect(container).toMatchSnapshot();
 });

package/src/components/data/Chip/__snapshots__/Chip.test.tsx.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Chip/> 1`] = `
+<div>
+  <div
+    style="padding: .5rem; max-width: 100%;"
+  >
+    <div
+      style="display: flex; align-items: center; gap: .5rem;"
+    >
+      <strong
+        style="font-size: 1rem;"
+      >
+        Something went wrong!
+      </strong>
+      <button
+        style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
+      >
+        Hide Error
+      </button>
+    </div>
+    <div
+      style="height: .25rem;"
+    />
+    <div>
+      <pre
+        style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
+      >
+        <code>
+          Passed an incorrect argument to a color function, please pass a string representation of a color.
+
+
+        </code>
+      </pre>
+    </div>
+  </div>
+</div>
+`;

package/src/components/data/Console/Console.tsx

@@ -8,13 +8,7 @@ import { useConsoleLiveModeScrolling } from './useConsoleLiveMode';
 import Autosizer from 'react-virtualized-auto-sizer';
 import { AiOutlineDelete as ClearIcon } from 'react-icons/ai';
 import { Button } from '../../../components';
-
-const DEFAULT_LINE_HEIGHT = 25;
-export const GUTTER_SIZE = 10;
-/*  TODO: this does not work with the scrollitemto because it has no knowledge of the padding.
- *  https://gist.github.com/ValentinJS/4f3738ed426cac183e8446c869b162dd might be an option.
- */
-export const LIST_PADDING_SIZE = 0;
+import { GUTTER_SIZE, LIST_PADDING_SIZE, DEFAULT_LINE_HEIGHT } from './constants';
 
 interface RowState {
   height: number;

package/src/components/data/Console/ConsoleLine/index.tsx

@@ -20,7 +20,7 @@ import {
   ExpandIconContainer,
 } from './style';
 import { Message, MessageType } from '../MessageModel';
-import { GUTTER_SIZE, LIST_PADDING_SIZE } from '../Console';
+import { GUTTER_SIZE, LIST_PADDING_SIZE } from '../constants';
 
 const COLLAPSED_LENGTH = 125;
 

package/src/components/data/Console/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_LINE_HEIGHT = 25;
+export const GUTTER_SIZE = 10;
+/*  TODO: this does not work with the scrollitemto because it has no knowledge of the padding.
+ *  https://gist.github.com/ValentinJS/4f3738ed426cac183e8446c869b162dd might be an option.
+ */
+export const LIST_PADDING_SIZE = 0;

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

@@ -28,6 +28,7 @@ import {
   AiOutlinePicRight as TightDensityIcon,
   AiOutlineRight as ExpandIcon,
   AiOutlineUp as CollapseIcon,
+  AiOutlineSearch as SearchIcon,
 } from 'react-icons/ai';
 import { ColumnHeader } from './subcomponents/ColumnHeader';
 import { ColumnVisibility } from './subcomponents/ColumnVisibility';
@@ -37,7 +38,8 @@ import { PageSizeSelect } from './subcomponents/Pagination/PageSizeSelect';
 
 import { ColumnFilter, PageOptions } from '../../../hooks/useTableActions';
 import { GenericCheckBox as CheckBox } from '../../inputs/CheckBox/Generic';
-import { useLocalStorage } from '../../../hooks';
+import { useDebounce, useLocalStorage } from '../../../hooks';
+import { UnControlledTextField } from '../../../components';
 
 export interface TableProps<DataType extends object> {
   id: string;
@@ -58,6 +60,10 @@ export interface TableProps<DataType extends object> {
   /// Renders actions that are only visible when one or more rows are selected.
   renderRowSelectionActions?: () => JSX.Element;
 
+  /// When callback is assigned, an input field will appear in the toolbar.
+  onSearchInputChanged?: (input: string) => void;
+  searchInputPlaceholder?: string;
+
   title?: string;
 
   rowSelection?: {
@@ -95,6 +101,8 @@ export function Table<DataType extends object>({
   rowSelection,
   columnSearch,
   renderDetailPanel,
+  onSearchInputChanged,
+  searchInputPlaceholder = 'Search...',
   renderToolbar,
   canExpand = () => false,
   renderRowSelectionActions,
@@ -127,6 +135,15 @@ export function Table<DataType extends object>({
 
   const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({});
   const { storedValue: density, setValue: setDensity } = useLocalStorage<Density>(`table-density-${id}`, 'tight');
+  const [searchInput, setSearchInput] = useState<string>('');
+  const debouncedValue = useDebounce(searchInput, 350);
+
+  useEffect(() => {
+    if (onSearchInputChanged) {
+      onSearchInputChanged(debouncedValue);
+      table.resetPagination();
+    }
+  }, [debouncedValue]);
 
   // Might because potentially none fullfil the canExpand condtion.
   const rowsMightExpand = renderDetailPanel ? true : false;
@@ -245,6 +262,18 @@ export function Table<DataType extends object>({
           {hasRowSelection && renderRowSelectionActions && renderRowSelectionActions()}
         </Flex>
         <Flex>
+          {onSearchInputChanged && (
+            <UnControlledTextField
+              name="search-input"
+              value={searchInput}
+              placeholder={searchInputPlaceholder}
+              id={id + '-search-input'}
+              hasDescription={false}
+              hasError={false}
+              icon={<SearchIcon />}
+              onChange={(e) => setSearchInput(e.currentTarget.value)}
+            />
+          )}
           {renderToolbar && renderToolbar()}
           {!isLoading && <Filter table={table} />}
           <ColumnVisibility

package/src/components/data/Table/subcomponents/Filter/field.tsx

@@ -1,9 +1,10 @@
 import { Control, UseFormSetValue, useWatch } from 'react-hook-form';
 import { SelectField, TextField } from '../../../../../components';
-import { Operators, FilterInputType, IFormInputs } from '.';
+import { IFormInputs } from '.';
 import { Column } from '@tanstack/react-table';
 import { useLayoutEffect } from 'react';
 import { camelCaseToSpaces } from '../../../../../helpers';
+import { FilterInputType, Operators } from './types';
 
 interface FilterFieldProps<DataType> {
   index: number;
@@ -70,7 +71,6 @@ export function FilterRow<DataType extends object>({
         control={control}
         name={`filters.${index}.column`}
         label="Column"
-        inPortal
         render={(selectedItems) => {
           if (selectedItems.length === 0) {
             return 'Select a column';
@@ -95,7 +95,6 @@ export function FilterRow<DataType extends object>({
         control={control}
         name={`filters.${index}.operator`}
         label="Condition"
-        inPortal
         render={() => {
           const operator = currentOperator?.toString();
 

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

@@ -7,17 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ButtonContainer, Container, FilterActions, FilterContainer } from './style';
 import { FilterRow } from './field';
-
-export enum Operators {
-  is = 'is',
-  contains = 'contains',
-}
-
-export enum FilterInputType {
-  string = 'string',
-  uuid = 'uuid',
-  datetime = 'datetime',
-}
+import { Operators, FilterInputType } from './types';
 
 export interface IFormInputs {
   filters: {

package/src/components/data/Table/subcomponents/Filter/types.ts

@@ -0,0 +1,10 @@
+export enum Operators {
+  is = 'is',
+  contains = 'contains',
+}
+
+export enum FilterInputType {
+  string = 'string',
+  uuid = 'uuid',
+  datetime = 'datetime',
+}

package/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx

@@ -14,7 +14,6 @@ export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, page
       id="page-size"
       multiple={false}
       name="pageSize"
-      inPortal={true}
       value={pageSize.toString() || '10'}
       onChange={onPageSizeChange}
       render={(selectedItems) => {

package/src/components/data/index.ts

@@ -18,9 +18,6 @@ export { Drawer, DrawerSkeleton } from './Drawer';
 export { Stats } from './Stats';
 export type { StatsProps } from './Stats/';
 
-export { LinkCard } from './LinkCard';
-export type { LinkCardProps } from './LinkCard';
-
 export { DateFormatter } from './DateFormatter';
 export type { DateFormatterProps } from './DateFormatter';
 

package/src/components/dialogs/Dialog/DialogBody.tsx

@@ -7,6 +7,7 @@ const Container = styled.div<{ size: Size }>`
   flex-flow: column nowrap;
   align-items: center;
   width: 100%;
+  min-width: 350px;
   margin: 0 auto;
   padding: ${({ theme }) => theme.spacing[4]};
 

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

@@ -1,5 +1,6 @@
 import { Alert } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
 
 it('Should render <Alert/>', () => {
   const { container } = render(<Alert text="Alert text" title="Alert title" variant="info" />);