@takaro/lib-components 0.0.14 → 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.14",
+  "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,16 +29,33 @@
     "@rjsf/core": "5.20.0",
     "@rjsf/utils": "5.20.0",
     "@rjsf/validator-ajv8": "5.20.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",
+    "@visx/curve": "3.3.0",
+    "@visx/event": "3.3.0",
+    "@visx/geo": "3.5.0",
+    "@visx/gradient": "3.3.0",
+    "@visx/grid": "3.5.0",
+    "@visx/group": "3.3.0",
+    "@visx/heatmap": "3.3.0",
+    "@visx/mock-data": "3.3.0",
+    "@visx/pattern": "3.3.0",
+    "@visx/responsive": "3.10.2",
+    "@visx/scale": "3.5.0",
+    "@visx/shape": "3.5.0",
+    "@visx/tooltip": "3.3.0",
+    "@visx/vendor": "3.5.0",
+    "@visx/zoom": "3.3.0",
     "framer-motion": "11.9.0",
     "luxon": "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",
@@ -50,23 +65,7 @@
     "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/geo": "3.5.0",
-    "topojson-client": "3.1.0"
+    "topojson-client": "3.1.0",
+    "web-vitals": "4.2.3"
   }
 }

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/AreaChart/AreaChart.stories.tsx

@@ -23,12 +23,6 @@ const Wrapper = styled.div`
   width: 500px;
 `;
 
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
 export const Default: StoryFn<AreaChartProps<AppleStock>> = (args) => {
   const getDate = (d: AppleStock) => new Date(d.date);
   const getStockValue = (d: AppleStock) => d.close;
@@ -57,7 +51,7 @@ function generateData() {
   const data: PingData[] = [];
   for (let i = 0; i < 100; i++) {
     const timestamp = faker.date.between({ from: '2021-01-01T00:00:00Z', to: '2021-01-31T23:59:59Z' }).toISOString();
-    const latency = faker.number.float({ min: 0, max: 70, precision: 1 });
+    const latency = faker.number.float({ min: 0, max: 70, fractionDigits: 1 });
     data.push({ timestamp, latency });
   }
   data.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
@@ -75,8 +69,7 @@ export const PingExample: StoryFn = () => {
   return (
     <div style={{ width: 800, height: 300 }}>
       <Card variant="outline">
-        <Header>
-          <h2 style={{ marginBottom: '10px' }}>Ping latency</h2>
+        <Card.Title label="Ping latency">
           <Dropdown>
             <Dropdown.Trigger asChild>
               <IconButton icon={<MenuIcon />} ariaLabel="open menu" />
@@ -87,17 +80,19 @@ export const PingExample: StoryFn = () => {
               <Dropdown.Menu.Item onClick={() => {}} label="Option 3" />
             </Dropdown.Menu>
           </Dropdown>
-        </Header>
-        <div style={{ height: '500px' }}>
-          <AreaChart<PingData>
-            name="Ping"
-            xAccessor={getDate}
-            yAccessor={getLatency}
-            tooltipAccessor={tooltipAccessor}
-            data={generateData()}
-            showBrush={false}
-          />
-        </div>
+        </Card.Title>
+        <Card.Body>
+          <div style={{ height: '500px' }}>
+            <AreaChart<PingData>
+              name="Ping"
+              xAccessor={getDate}
+              yAccessor={getLatency}
+              tooltipAccessor={tooltipAccessor}
+              data={generateData()}
+              showBrush={false}
+            />
+          </div>
+        </Card.Body>
       </Card>
     </div>
   );

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

@@ -10,8 +10,7 @@ interface Shape {
   name: string;
 }
 
-// 3 letter country codes
-const data: Shape[] = [
+const alpha3: Shape[] = [
   { code: 'BEL', amount: 10, name: 'Belgium' },
   { code: 'CAN', amount: 20, name: 'Canada' },
   { code: 'DEU', amount: 30, name: 'Germany' },
@@ -27,19 +26,22 @@ const data: Shape[] = [
 export default {
   title: 'Charts/GeoMercator',
   component: GeoMercator,
+  args: {
+    showZoomControls: false,
+    allowZoomAndDrag: false,
+  },
 } as Meta<GeoMercatorProps<Shape>>;
 
 const Wrapper = styled.div`
-  width: 90vw;
-  height: 90vh;
+  width: fit-content;
 `;
 
 const Inner = styled.div`
-  width: 90vw;
-  height: 90vh;
+  width: 800px;
+  height: 800px;
 `;
 
-export const Default: StoryFn<GeoMercatorProps<Shape>> = () => {
+export const Default: StoryFn<GeoMercatorProps<Shape>> = (args) => {
   const getCountry = (d: Shape) => d.code;
   const getAmount = (d: Shape) => Number(d.amount);
   const tooltipAccessor = (d: Shape) => {
@@ -48,17 +50,21 @@ export const Default: StoryFn<GeoMercatorProps<Shape>> = () => {
 
   return (
     <Wrapper>
-      <Card variant="outline">
-        <Inner>
-          <h2>Map</h2>
-          <GeoMercator<Shape>
-            name="geo-mercator"
-            xAccessor={getCountry}
-            yAccessor={getAmount}
-            tooltipAccessor={tooltipAccessor}
-            data={data}
-          />
-        </Inner>
+      <Card>
+        <Card.Title label="Map" />
+        <Card.Body>
+          <Inner>
+            <GeoMercator<Shape>
+              name="geo-mercator"
+              xAccessor={getCountry}
+              yAccessor={getAmount}
+              tooltipAccessor={tooltipAccessor}
+              data={alpha3}
+              showZoomControls={args.showZoomControls}
+              allowZoomAndDrag={args.allowZoomAndDrag}
+            />
+          </Inner>
+        </Card.Body>
       </Card>
     </Wrapper>
   );