@takaro/lib-components 0.0.1 → 0.0.4

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

@@ -4,7 +4,7 @@ import { ParentSize } from '@visx/responsive';
 import { GridColumns } from '@visx/grid';
 import { Group } from '@visx/group';
 import { AreaClosed, Bar } from '@visx/shape';
-import { max, extent } from '@visx/vendor/d3-array';
+import { max, extent, bisector } from '@visx/vendor/d3-array';
 import { scaleTime, scaleLinear } from '@visx/scale';
 import { AxisBottom, AxisLeft } from '@visx/axis';
 import { curveMonotoneX } from '@visx/curve';
@@ -14,7 +14,6 @@ import { timeFormat } from '@visx/vendor/d3-time-format';
 import { PatternLines } from '@visx/pattern';
 import { Brush } from '@visx/brush';
 import { Bounds } from '@visx/brush/lib/types';
-import { bisector } from '@visx/vendor/d3-array';
 
 import { useTheme } from '../../../hooks';
 import { useGradients } from '../useGradients';
@@ -143,7 +142,7 @@ const Chart = <T,>({
         range: [0, xMax],
         domain: extent(filteredData, xAccessor) as [Date, Date],
       }),
-    [xMax, filteredData]
+    [xMax, filteredData],
   );
 
   const yScale = useMemo(
@@ -153,7 +152,7 @@ const Chart = <T,>({
         domain: [0, max(filteredData, yAccessor) || 0],
         nice: true,
       }),
-    [yMax, filteredData]
+    [yMax, filteredData],
   );
 
   const xBrushScale = useMemo(
@@ -162,7 +161,7 @@ const Chart = <T,>({
         range: [0, xBrushMax],
         domain: extent(data, xAccessor) as [Date, Date],
       }),
-    [xBrushMax]
+    [xBrushMax],
   );
 
   const yBrushScale = useMemo(
@@ -172,7 +171,7 @@ const Chart = <T,>({
         domain: [0, max(data, yAccessor) || 0],
         nice: true,
       }),
-    [yBrushMax]
+    [yBrushMax],
   );
 
   const initialBrushPosition = useMemo(
@@ -180,7 +179,7 @@ const Chart = <T,>({
       start: { x: xBrushScale(xAccessor(data[0])) },
       end: { x: xBrushScale(xAccessor(data[data.length - 1])) },
     }),
-    [xBrushScale]
+    [xBrushScale],
   );
 
   const onBrushChange = (domain: Bounds | null) => {
@@ -213,7 +212,7 @@ const Chart = <T,>({
         tooltipTop: tooltipY,
       });
     },
-    [yScale, xScale, filteredData, yAccessor, xAccessor, width, height]
+    [yScale, xScale, filteredData, yAccessor, xAccessor, width, height],
   );
 
   if (width < 10) return null;

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

@@ -127,7 +127,7 @@ const Chart = <T,>({
         domain: filteredData.map(xAccessor),
         padding: 0.4,
       }),
-    [xMax, filteredData]
+    [xMax, filteredData],
   );
   const yScale = useMemo(
     () =>
@@ -136,7 +136,7 @@ const Chart = <T,>({
         round: true,
         domain: [0, max(filteredData, yAccessor) ?? 0],
       }),
-    [yMax, filteredData]
+    [yMax, filteredData],
   );
 
   const xBrushScale = useMemo(
@@ -146,7 +146,7 @@ const Chart = <T,>({
         domain: data.map(xAccessor),
         round: true,
       }),
-    [xBrushMax]
+    [xBrushMax],
   );
 
   const yBrushScale = useMemo(
@@ -156,7 +156,7 @@ const Chart = <T,>({
         domain: [0, Math.max(...data.map(yAccessor))],
         nice: true,
       }),
-    [yBrushMax]
+    [yBrushMax],
   );
 
   const onBrushChange = (domain: Bounds | null) => {

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

@@ -92,7 +92,7 @@ InnerGeoMercator<T>) => {
         tooltipTop: eventSvgCoords?.y,
       });
     },
-    [yAccessor, xAccessor, width, height]
+    [yAccessor, xAccessor, width, height],
   );
 
   return width < 10 ? null : (

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

@@ -1,10 +1,9 @@
 import { ParentSize } from '@visx/responsive';
-import { scaleLinear } from '@visx/scale';
 import { Group } from '@visx/group';
 import { AxisTop, AxisLeft } from '@visx/axis';
 import { HeatmapRect } from '@visx/heatmap';
 import { useTooltipInPortal } from '@visx/tooltip';
-import { scaleBand } from '@visx/scale';
+import { scaleLinear, scaleBand } from '@visx/scale';
 
 import { InnerChartProps, Margin } from '../util';
 import { useTheme } from '../../../hooks';
@@ -169,7 +168,7 @@ const Chart = <T,>({
                     fillOpacity={bin.opacity}
                   />
                 );
-              })
+              }),
             )
           }
         </HeatmapRect>
@@ -200,7 +199,7 @@ function transformData<T>(
   xAccessor: (d: T) => number,
   yAccessor: (d: T) => number,
   zAccessor: (d: T) => number,
-  tooltipAccessor: (d: T) => string
+  tooltipAccessor: (d: T) => string,
 ): OuterBin[] {
   const map = new Map<number, Map<number, { count: number; tooltip: string }>>();
 

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

@@ -103,7 +103,7 @@ const Chart = <T,>({
         range: [margin.left, innerWidth],
         domain: extent(data, xAccessor) as [Date, Date],
       }),
-    [innerWidth]
+    [innerWidth],
   );
 
   const yScale = useMemo(
@@ -112,7 +112,7 @@ const Chart = <T,>({
         range: [innerHeight, margin.bottom],
         domain: [0, max(data, yAccessor) as number],
       }),
-    [innerHeight]
+    [innerHeight],
   );
 
   const handleTooltip = useCallback(
@@ -134,7 +134,7 @@ const Chart = <T,>({
         tooltipTop: tooltipY,
       });
     },
-    [yScale, xScale, data, yAccessor, xAccessor, width, height]
+    [yScale, xScale, data, yAccessor, xAccessor, width, height],
   );
 
   return width === 10 ? null : (

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

@@ -98,7 +98,7 @@ const Chart = <T,>({
         tooltipData: tooltipAccessor(data),
       });
     },
-    [data, tooltipAccessor]
+    [data, tooltipAccessor],
   );
 
   return width < 10 ? null : (

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

@@ -99,7 +99,7 @@ const Chart = <T,>({
         tooltipData: tooltipAccessor(data),
       });
     },
-    [data, tooltipAccessor]
+    [data, tooltipAccessor],
   );
 
   const webs = genAngles(data.length);

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

@@ -82,7 +82,7 @@ const Chart = <T,>({
         tooltipData: tooltipAccessor(data),
       });
     },
-    [data, tooltipAccessor]
+    [data, tooltipAccessor],
   );
 
   // bounds

package/src/components/charts/index.tsx

@@ -16,5 +16,8 @@ export type { RadarChartProps } from './RadarChart';
 export { RadialLineChart } from './RadialLineChart';
 export type { RadialLineChartProps } from './RadialLineChart';
 
+export { LineChart } from './LineChart';
+export type { LineChartProps } from './LineChart';
+
 export { RadialBarChart } from './RadialBarChart';
 export type { RadialBarChartProps } from './RadialBarChart';

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

@@ -29,7 +29,9 @@ const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
     const context = useAvatarContext();
     const imageLoadingStatus = useImageLoadingStatus(src);
     const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {
-      onLoadingStatusChange && onLoadingStatusChange(status);
+      if (onLoadingStatusChange) {
+        onLoadingStatusChange(status);
+      }
       context.onImageLoadingStatusChange(status);
     });
 
@@ -44,8 +46,9 @@ const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
     }
 
     return imageLoadingStatus === 'loaded' ? <img {...imageProps} ref={ref} src={src} /> : null;
-  }
+  },
 );
+AvatarImage.displayName = 'AvatarImage';
 
 // * -------------------------------------------------------------------------------------------------
 // * FallBack
@@ -68,8 +71,9 @@ export const AvatarFallBack = forwardRef<HTMLSpanElement, PropsWithChildren<Avat
     }, [delayMs]);
 
     return canRender && imageLoadingStatus !== 'loaded' ? <span ref={ref}>{children}</span> : null;
-  }
+  },
 );
+AvatarFallBack.displayName = 'AvatarFallBack';
 
 // * -------------------------------------------------------------------------------------------------
 // * FallBack

package/src/components/data/Avatar/style.ts

@@ -86,8 +86,8 @@ export const Container = styled.div<{ size: Size; variant?: AvatarVariant }>`
     switch (size) {
       case 'tiny':
         return `
-          width: 2rem;
-          height: 2rem;
+          width: 1rem;
+          height: 1rem;
           font-size: .8rem;
           line-height: .8rem;
         `;

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

@@ -21,56 +21,54 @@ export interface ChipProps {
   showIcon?: ShowIcon;
 }
 
-export const Chip = forwardRef<HTMLDivElement, ChipProps>(
-  (
-    {
-      color,
-      variant = 'default',
-      label,
-      disabled = false,
-      readOnly = false,
-      onClick = undefined,
-      onDelete = undefined,
-      isLoading = false,
-      dot = false,
-      icon,
-      showIcon = 'always',
-    },
-    ref
-  ) => {
-    if (isLoading) {
-      return (
-        <Container
-          ref={ref}
-          clickable={!readOnly && !disabled && onClick !== undefined}
-          color={color}
-          disabled={disabled}
-          outline={false}
-          onClick={onClick ? onClick : undefined}
-          className="placeholder"
-          showIcon={showIcon}
-        >
-          {dot && <Dot color={color} outline={variant !== 'default'} />}
-          <span style={{ minWidth: '70px', minHeight: '15px' }}></span>
-        </Container>
-      );
-    }
-
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
+  {
+    color,
+    variant = 'default',
+    label,
+    disabled = false,
+    readOnly = false,
+    onClick = undefined,
+    onDelete = undefined,
+    isLoading = false,
+    dot = false,
+    icon,
+    showIcon = 'always',
+  },
+  ref,
+) {
+  if (isLoading) {
     return (
       <Container
         ref={ref}
-        clickable={onClick !== undefined}
+        clickable={!readOnly && !disabled && onClick !== undefined}
         color={color}
         disabled={disabled}
+        outline={false}
         onClick={onClick ? onClick : undefined}
-        outline={variant !== 'default'}
+        className="placeholder"
         showIcon={showIcon}
       >
         {dot && <Dot color={color} outline={variant !== 'default'} />}
-        <span>{label}</span>
-        {!onDelete && icon && cloneElement(icon, { size: 12, className: 'icon' })}
-        {onDelete && !readOnly && !disabled && <Icon onClick={onDelete} size={12} />}
+        <span style={{ minWidth: '70px', minHeight: '15px' }}></span>
       </Container>
     );
   }
-);
+
+  return (
+    <Container
+      ref={ref}
+      clickable={onClick !== undefined}
+      color={color}
+      disabled={disabled}
+      onClick={onClick ? onClick : undefined}
+      outline={variant !== 'default'}
+      showIcon={showIcon}
+    >
+      {dot && <Dot color={color} outline={variant !== 'default'} />}
+      <span>{label}</span>
+      {!onDelete && icon && cloneElement(icon, { size: 12, className: 'icon' })}
+      {onDelete && !readOnly && !disabled && <Icon onClick={onDelete} size={12} />}
+    </Container>
+  );
+});

package/src/components/data/Chip/style.ts

@@ -1,5 +1,6 @@
 import { styled } from '../../../styled';
 import { ChipColor, ShowIcon } from '.';
+import { shade } from 'polished';
 
 export const Container = styled.div<{
   disabled: boolean;
@@ -35,7 +36,7 @@ export const Container = styled.div<{
     if (!outline) {
       return 'border: 0.1rem solid transparent;';
     }
-    return `border: 0.1rem solid ${theme.colors[color]};`;
+    return `border: 0.1rem solid ${shade(0.5, theme.colors[color])};`;
   }}
 
   &:hover {
@@ -69,7 +70,7 @@ export const Container = styled.div<{
 
   ${({ theme, color, outline }): string => {
     if (outline) {
-      return 'background-color: transparent;';
+      return `background-color: ${shade('0.8', theme.colors[color])};`;
     }
     return `background-color: ${theme.colors[color]};`;
   }}

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

@@ -67,17 +67,19 @@ export const Console: FC<ConsoleProps> = ({ listenerFactory, onExecuteCommand, s
   // this is required so that react-window knows the padding of the element
   // again, react-window does not have types, cba to type this.
   //
-  const innerElementType = forwardRef<HTMLDivElement, any>(({ style, ...rest }, ref) => (
-    <div
-      ref={ref}
-      style={{
-        ...style,
-        height: `${style.height + LIST_PADDING_SIZE * 2}px`,
-        paddingTop: `${GUTTER_SIZE}px`,
-      }}
-      {...rest}
-    />
-  ));
+  const InnerElementType = forwardRef<HTMLDivElement, any>(function InnerConsole({ style, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        style={{
+          ...style,
+          height: `${style.height + LIST_PADDING_SIZE * 2}px`,
+          paddingTop: `${GUTTER_SIZE}px`,
+        }}
+        {...rest}
+      />
+    );
+  });
 
   return (
     <Wrapper>
@@ -99,7 +101,7 @@ export const Console: FC<ConsoleProps> = ({ listenerFactory, onExecuteCommand, s
                 width={width}
                 height={height}
                 onScroll={toggleLiveModeOnConsoleScroll}
-                innerElementType={innerElementType}
+                innerElementType={InnerElementType}
                 ref={consoleMessagesBoxRef}
               >
                 {({ data, index, style }) => {

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

@@ -5,9 +5,10 @@ import { AiFillCopy as CopyIcon, AiOutlineCheck as CheckmarkIcon } from 'react-i
 export interface CopyIdProps {
   id?: string;
   placeholder?: string;
+  copyText?: string;
 }
 
-export const CopyId: FC<CopyIdProps> = ({ id, placeholder }) => {
+export const CopyId: FC<CopyIdProps> = ({ id, placeholder, copyText = 'copied' }) => {
   const [copied, setCopied] = useState<boolean>(false);
 
   function handleCopy(text: string) {
@@ -31,7 +32,7 @@ export const CopyId: FC<CopyIdProps> = ({ id, placeholder }) => {
       icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
       onClick={() => handleCopy(id)}
       variant="outline"
-      label={copied ? 'copied' : placeholder ? placeholder : id}
+      label={copied ? copyText : placeholder ? placeholder : id}
       color="backgroundAccent"
     />
   );

package/src/components/data/Drawer/Drawer.stories.tsx

@@ -1,7 +1,5 @@
-import React, { useMemo } from 'react';
-import { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-
 import { Button, TextField, CollapseList, Chip, RadioGroup, Switch, Drawer, DrawerSkeleton } from '../../../components';
 import { styled } from '../../../styled';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -41,11 +39,11 @@ export const Default: StoryFn = () => {
   const validationSchema = useMemo(
     () =>
       z.object({
-        name: z.string().nonempty('Name field cannot be empty'),
+        name: z.string().min(1, 'Name field is required'),
         description: z.string().min(20, 'description must be at least 20 characters'),
         priceType: z.enum(['fixed', 'variable']),
       }),
-    []
+    [],
   );
 
   const { handleSubmit, control } = useForm<FormFields>({

package/src/components/data/Drawer/DrawerContent.tsx

@@ -34,7 +34,7 @@ export const HandleContainer = styled.div`
   }
 `;
 
-export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>((props, propRef) => {
+export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>(function DrawerContent(props, propRef) {
   const { context, labelId, descriptionId, getFloatingProps, setOpen, canDrag } = useDrawerContext();
 
   const ref = useMergeRefs([context.refs.setFloating, propRef]);

package/src/components/data/Drawer/DrawerHeading.tsx

@@ -16,34 +16,35 @@ interface DialogHeadingProps extends HTMLProps<HTMLHeadingElement> {
   hasClose?: boolean;
 }
 
-export const DrawerHeading = forwardRef<HTMLHeadingElement, DialogHeadingProps>(
-  ({ children, hasClose = true, ...props }, ref) => {
-    const { setLabelId, setOpen } = useDrawerContext();
-    const id = useId();
+export const DrawerHeading = forwardRef<HTMLHeadingElement, DialogHeadingProps>(function DrawerHeading(
+  { children, hasClose = true, ...props },
+  ref,
+) {
+  const { setLabelId, setOpen } = useDrawerContext();
+  const id = useId();
 
-    useLayoutEffect(() => {
-      setLabelId(id);
-      return () => setLabelId(undefined);
-    }, [id, setLabelId]);
+  useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
 
-    return (
-      <Container>
-        <h2 {...props} ref={ref} id={id}>
-          {children}
-        </h2>
-        {hasClose && (
-          <Tooltip>
-            <Tooltip.Trigger asChild>
-              <IconButton
-                onClick={() => setOpen(false)}
-                icon={<CloseIcon size={18} cursor="pointer" />}
-                ariaLabel="Close"
-              />
-            </Tooltip.Trigger>
-            <Tooltip.Content>Close</Tooltip.Content>
-          </Tooltip>
-        )}
-      </Container>
-    );
-  }
-);
+  return (
+    <Container>
+      <h2 {...props} ref={ref} id={id}>
+        {children}
+      </h2>
+      {hasClose && (
+        <Tooltip>
+          <Tooltip.Trigger asChild>
+            <IconButton
+              onClick={() => setOpen(false)}
+              icon={<CloseIcon size={18} cursor="pointer" />}
+              ariaLabel="Close"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content>Close</Tooltip.Content>
+        </Tooltip>
+      )}
+    </Container>
+  );
+});

package/src/components/data/Drawer/useDrawer.tsx

@@ -47,6 +47,6 @@ export function useDrawer({
       setDescriptionId,
       canDrag,
     }),
-    [open, setOpen, interactions, data, labelId, descriptionId]
+    [open, setOpen, interactions, data, labelId, descriptionId],
   );
 }

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

@@ -10,42 +10,43 @@ export interface InfiniteScrollProps {
   hasNextPage?: boolean;
 }
 
-export const InfiniteScroll = forwardRef<HTMLElement, InfiniteScrollProps>(
-  ({ hasNextPage = false, fetchNextPage, isFetching, isFetchingNextPage }, propRef) => {
-    const { ref: viewRef, inView } = useInView();
-    const ref = useMergeRefs([propRef, viewRef]);
+export const InfiniteScroll = forwardRef<HTMLElement, InfiniteScrollProps>(function InfiniteScroll(
+  { hasNextPage = false, fetchNextPage, isFetching, isFetchingNextPage },
+  propRef,
+) {
+  const { ref: viewRef, inView } = useInView();
+  const ref = useMergeRefs([propRef, viewRef]);
 
-    useEffect(() => {
-      if (inView) {
-        fetchNextPage();
-      }
-    }, [inView]);
-
-    // Fallback: sometimes the inView event does not trigger automatically.
-    // the user will have to manually click the button to fetch the next page.
-    const handleOnClick = () => {
+  useEffect(() => {
+    if (inView) {
       fetchNextPage();
-    };
+    }
+  }, [inView]);
+
+  // Fallback: sometimes the inView event does not trigger automatically.
+  // the user will have to manually click the button to fetch the next page.
+  const handleOnClick = () => {
+    fetchNextPage();
+  };
 
-    return (
-      <>
-        {!isFetchingNextPage && hasNextPage && !isFetching && (
-          <div
-            ref={ref}
-            style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
-          >
-            <Button text="Load more" ref={ref} onClick={handleOnClick} />
-          </div>
-        )}
-        {hasNextPage && isFetchingNextPage && (
-          <div
-            ref={ref}
-            style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
-          >
-            <Spinner size="medium" />
-          </div>
-        )}
-      </>
-    );
-  }
-);
+  return (
+    <>
+      {!isFetchingNextPage && hasNextPage && !isFetching && (
+        <div
+          ref={ref}
+          style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Button text="Load more" ref={ref} onClick={handleOnClick} />
+        </div>
+      )}
+      {hasNextPage && isFetchingNextPage && (
+        <div
+          ref={ref}
+          style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Spinner size="medium" />
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -105,6 +105,7 @@ export default {
     sort: false,
     refetching: true,
     isLoading: false,
+    data,
   },
 } as Meta<TableProps<User>>;
 
@@ -121,7 +122,7 @@ const Users: FC<TableProps<User>> = (args) => {
   return (
     <Table
       id="story-table"
-      data={data}
+      data={args.data}
       columns={columns}
       pagination={{
         ...pagination,
@@ -139,4 +140,7 @@ const Users: FC<TableProps<User>> = (args) => {
   );
 };
 
-export const TableExample: StoryFn<TableProps<User>> = (args) => <Users {...args} />;
+export const EmptyTable: StoryFn<TableProps<User>> = (args) => {
+  return <Users {...args} data={[]} />;
+};
+export const DataTable: StoryFn<TableProps<User>> = (args) => <Users {...args} />;