@takaro/lib-components 0.0.0-next.0da151e

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

@@ -0,0 +1,231 @@
+import { MouseEvent, useCallback } from 'react';
+
+import { ParentSize } from '@visx/responsive';
+import { Group } from '@visx/group';
+import { LineRadial } from '@visx/shape';
+import { scaleTime, scaleLog, NumberLike } from '@visx/scale';
+import { GridAngle, GridRadial } from '@visx/grid';
+import { AxisLeft } from '@visx/axis';
+import { motion } from 'framer-motion';
+import { extent } from '@visx/vendor/d3-array';
+import { curveBasisOpen } from '@visx/curve';
+import { useTooltipInPortal, useTooltip } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
+
+import { InnerChartProps, getDefaultTooltipStyles, TooltipConfig, ChartProps } from '../util';
+import { useTheme } from '../../../hooks';
+import { useGradients } from '../useGradients';
+import { EmptyChart } from '../EmptyChart';
+
+const formatTicks = (val: NumberLike) => String(val);
+
+export interface RadialLineChartProps<T> extends ChartProps {
+  data: T[];
+  xAccessor: (d: T) => number;
+  yAccessor: (d: T) => number;
+  /** Tooltip configuration */
+  tooltip?: TooltipConfig<T>;
+}
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export const RadialLineChart = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  name,
+  margin = defaultMargin,
+  animate = true,
+  tooltip,
+}: RadialLineChartProps<T>) => {
+  const hasData = data && data.length > 0;
+
+  return (
+    <>
+      <ParentSize>
+        {hasData
+          ? (parent) => (
+              <Chart<T>
+                name={name}
+                data={data}
+                width={parent.width}
+                height={parent.height}
+                margin={margin}
+                yAccessor={yAccessor}
+                xAccessor={xAccessor}
+                tooltip={tooltip}
+                animate={animate}
+              />
+            )
+          : () => <EmptyChart />}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerRadialLineChartProps<T> = InnerChartProps & RadialLineChartProps<T>;
+
+const Chart = <T,>({
+  width,
+  xAccessor,
+  yAccessor,
+  data,
+  name,
+  height,
+  tooltip,
+  animate = true,
+}: InnerRadialLineChartProps<T>) => {
+  const tooltipAccessor = tooltip?.accessor;
+  const theme = useTheme();
+  const gradients = useGradients(name);
+
+  const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, hideTooltip, showTooltip } = useTooltip<T>();
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+
+  const xScale = scaleTime<number>({
+    range: [0, Math.PI * 2],
+    domain: extent(data, xAccessor) as [number, number],
+  });
+
+  const yScale = scaleLog<number>({
+    domain: extent(data, yAccessor) as [number, number],
+  });
+
+  const angle = (d: T) => xScale(xAccessor(d)) ?? 0;
+  const radius = (d: T) => yScale(yAccessor(d)) ?? 0;
+  const padding = 15;
+
+  const handleMouseOver = useCallback(
+    (event: MouseEvent, dataPoint: T) => {
+      if (!tooltipAccessor) return;
+
+      const target = event.target as SVGElement;
+      const coords = localPoint(target.ownerSVGElement!, event);
+
+      showTooltip({
+        tooltipLeft: coords?.x,
+        tooltipTop: coords?.y,
+        tooltipData: dataPoint,
+      });
+    },
+    [tooltipAccessor, showTooltip],
+  );
+
+  // Update scale output to match component dimensions
+  yScale.range([0, height / 2 - padding]);
+  const reverseYScale = yScale.copy().range(yScale.range().reverse());
+
+  return width < 10 ? null : (
+    <svg ref={containerRef} width={width} height={height}>
+      {gradients.chart.gradient}
+      <rect width={width} height={height} fill={theme.colors.background} rx={14} />
+      <Group top={height / 2} left={width / 2}>
+        <GridAngle
+          scale={xScale}
+          outerRadius={height / 2 - padding}
+          stroke={theme.colors.backgroundAccent}
+          strokeWidth={1}
+          strokeOpacity={0.3}
+          strokeDasharray="5,2"
+          numTicks={20}
+        />
+        <GridRadial
+          scale={yScale}
+          numTicks={5}
+          stroke={theme.colors.backgroundAccent}
+          strokeWidth={1}
+          fill={theme.colors.backgroundAccent}
+          fillOpacity={0.1}
+          strokeOpacity={0.2}
+        />
+        <AxisLeft
+          top={-height / 2 + padding}
+          scale={reverseYScale}
+          numTicks={5}
+          tickStroke="none"
+          tickLabelProps={{
+            fontSize: 8,
+            fill: theme.colors.text,
+            fillOpacity: 1,
+            textAnchor: 'middle',
+            dx: '1em',
+            dy: '-0.5em',
+            paintOrder: 'stroke',
+          }}
+          tickFormat={formatTicks}
+          hideAxisLine
+        />
+        <LineRadial<T> angle={angle} radius={radius} curve={curveBasisOpen}>
+          {({ path }) => {
+            const d = path(data) || '';
+            return (
+              <motion.path
+                d={d}
+                strokeWidth={3}
+                strokeOpacity={0.8}
+                strokeLinecap="round"
+                fill="none"
+                stroke={theme.colors.primary}
+                initial={animate ? { pathLength: 0 } : { pathLength: 1 }}
+                animate={{ pathLength: 1 }}
+                transition={
+                  animate
+                    ? {
+                        duration: 1.5,
+                        ease: 'easeInOut',
+                      }
+                    : { duration: 0 }
+                }
+              />
+            );
+          }}
+        </LineRadial>
+        {tooltipAccessor &&
+          data.map((d, i) => {
+            const angleVal = angle(d);
+            const radiusVal = radius(d);
+            const x = Math.cos(angleVal - Math.PI / 2) * radiusVal;
+            const y = Math.sin(angleVal - Math.PI / 2) * radiusVal;
+
+            return (
+              <g key={`data-point-${i}`}>
+                {/* Invisible hit area for tooltip - no need for visible dots */}
+                <motion.circle
+                  cx={x}
+                  cy={y}
+                  r={12}
+                  fill="transparent"
+                  style={{ cursor: 'pointer' }}
+                  onMouseOut={hideTooltip}
+                  onMouseOver={(e) => handleMouseOver(e, d)}
+                  initial={animate ? { scale: 0 } : { scale: 1 }}
+                  animate={{ scale: 1 }}
+                  transition={
+                    animate
+                      ? {
+                          duration: 0.3,
+                          delay: 1.5,
+                          ease: 'easeOut',
+                        }
+                      : { duration: 0 }
+                  }
+                />
+              </g>
+            );
+          })}
+      </Group>
+      {tooltipOpen && tooltipData && tooltipAccessor && (
+        <TooltipInPortal
+          key={`tooltip-${name}`}
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={getDefaultTooltipStyles(theme)}
+        >
+          {tooltipAccessor(tooltipData)}
+        </TooltipInPortal>
+      )}
+    </svg>
+  );
+};

package/src/components/charts/ZoomControls.tsx

@@ -0,0 +1,49 @@
+import { ProvidedZoom } from '@visx/zoom/lib/types';
+import { FC } from 'react';
+import { styled } from '../../styled';
+import { Button, IconButton, Tooltip } from '../../components';
+import { AiOutlinePlus as ZoomInIcon, AiOutlineMinus as ZoomOutIcon } from 'react-icons/ai';
+
+const Controls = styled.div`
+  position: absolute;
+  bottom: 2rem;
+  right: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+interface ZoomControlsProps {
+  zoom: ProvidedZoom<SVGSVGElement>;
+}
+
+export const ZoomControls: FC<ZoomControlsProps> = ({ zoom }) => {
+  return (
+    <Controls>
+      <Tooltip placement="left">
+        <Tooltip.Trigger asChild>
+          <IconButton
+            icon={<ZoomInIcon />}
+            ariaLabel="zoom in"
+            onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Content>Zoom in</Tooltip.Content>
+      </Tooltip>
+      <Tooltip placement="left">
+        <Tooltip.Trigger asChild>
+          <IconButton
+            icon={<ZoomOutIcon />}
+            ariaLabel="zoom in"
+            onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
+          />
+        </Tooltip.Trigger>
+        <Tooltip.Content>Zoom out</Tooltip.Content>
+      </Tooltip>
+      <Button size="tiny" onClick={zoom.reset}>
+        Reset
+      </Button>
+      {/*<Button size="tiny" onClick={zoom.center} text="Center" />*/}
+    </Controls>
+  );
+};

package/src/components/charts/index.tsx

@@ -0,0 +1,26 @@
+export { BarChart } from './BarChart';
+export type { BarChartProps } from './BarChart';
+
+export { AreaChart } from './AreaChart';
+export type { AreaChartProps } from './AreaChart';
+
+export { HeatMap } from './Heatmap';
+export type { HeatmapProps } from './Heatmap';
+
+export { PieChart } from './PieChart';
+export type { PieChartProps } from './PieChart';
+
+export { RadarChart } from './RadarChart';
+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';
+
+export { GeoMercator } from './GeoMercator';
+export type { GeoMercatorProps } from './GeoMercator';

package/src/components/charts/useGradients.tsx

@@ -0,0 +1,37 @@
+import { LinearGradient } from '@visx/gradient';
+import { useTheme } from '../../hooks';
+
+export const useGradients = (name: string) => {
+  const theme = useTheme();
+
+  // Constructing the gradient IDs
+  const BACKGROUND_GRADIENT_ID = `background-gradient-${name}`;
+  const AREA_GRADIENT_ID = `area-gradient-${name}`;
+
+  // Gradient elements
+  const backgroundGradient = (
+    <LinearGradient id={BACKGROUND_GRADIENT_ID} from={theme.colors.background} to={theme.colors.background} />
+  );
+
+  const areaGradient = (
+    <LinearGradient
+      id={AREA_GRADIENT_ID}
+      from={theme.colors.primary}
+      to={theme.colors.primary}
+      fromOpacity={0.6}
+      toOpacity={0.2}
+    />
+  );
+
+  // Returning both gradient elements and their IDs
+  return {
+    background: {
+      gradient: backgroundGradient,
+      id: BACKGROUND_GRADIENT_ID,
+    },
+    chart: {
+      gradient: areaGradient,
+      id: AREA_GRADIENT_ID,
+    },
+  };
+};

package/src/components/charts/util.ts

@@ -0,0 +1,78 @@
+import { defaultStyles } from '@visx/tooltip';
+import { ThemeType } from '../../styled';
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface AxisConfig {
+  showX?: boolean;
+  showY?: boolean;
+  labelX?: string;
+  labelY?: string;
+  numTicksX?: number;
+  numTicksY?: number;
+  /** Whether to include zero in the Y-axis domain. Default: false (auto-scale from min) */
+  includeZeroY?: boolean;
+}
+
+export interface TooltipConfig<T> {
+  enabled?: boolean;
+  accessor?: (d: T, ...additionalArgs: any[]) => string;
+}
+
+export interface BrushConfig {
+  enabled?: boolean;
+  margin?: Margin;
+}
+
+export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';
+
+/** Grid display options for charts */
+export type GridDisplay = 'none' | 'x' | 'y' | 'xy';
+
+export interface ChartProps {
+  /// Unique identifier for the chart
+  name: string;
+  /** Display grid lines. Options: 'none', 'x', 'y', 'xy'. Default: 'none' */
+  grid?: GridDisplay;
+  /** Axis configuration */
+  axis?: AxisConfig;
+  /** Enable or disable animations. Default: true */
+  animate?: boolean;
+  /** Chart margins */
+  margin?: Margin;
+}
+
+export interface InnerChartProps extends ChartProps {
+  width: number;
+  height: number;
+}
+
+export const getDefaultTooltipStyles = (theme: ThemeType) => ({
+  ...defaultStyles,
+  background: theme.colors.background,
+  border: `1px solid ${theme.colors.backgroundAccent}`,
+  borderRadius: theme.borderRadius.small,
+  color: theme.colors.text,
+  fontSize: theme.fontSize.small,
+  whiteSpace: 'pre-wrap' as const,
+});
+
+export const getChartColors = (theme: ThemeType) => [
+  theme.colors.primary, // Primary color: '#664de5' (Vibrant purple)
+  '#FFD700', // Gold for a contrasting yet harmonious color
+  '#87CEEB', // Sky blue to complement the purple
+  '#FF69B4', // Hot pink for a playful, vibrant look
+  '#32CD32', // Lime green for nature-inspired freshness
+  '#FF8C00', // Dark orange for warmth
+  '#9370DB', // Medium purple for variety
+  '#20B2AA', // Light sea green for coolness
+  '#FF6347', // Tomato red for emphasis
+  '#4682B4', // Steel blue for professionalism
+  '#DAA520', // Goldenrod for richness
+  '#8B4789', // Dark orchid for depth
+];

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Avatar, AvatarGroupProps, AvatarProps } from '.';
+import { getInitials } from '../../../helpers';
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  grid-gap: 2rem;
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+`;
+
+const placeholder01 = 'images/placeholder-01.jpeg';
+const placeholder02 = 'images/placeholder-02.jpeg';
+const placeholder03 = 'images/placeholder-03.jpeg';
+
+export default {
+  title: 'Data/Avatar',
+  component: Avatar,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  argTypes: {
+    variant: {
+      options: ['square', 'rounded', 'circle'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+  args: {
+    size: 'medium',
+    unstackOnHover: false,
+    variant: 'circle',
+    max: 3,
+  },
+} as Meta<AvatarProps & AvatarGroupProps>;
+
+export const Default: StoryFn<AvatarProps> = (args) => (
+  <Avatar size={args.size} variant={args.variant}>
+    <Avatar.Image src={placeholder01} />
+    <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+  </Avatar>
+);
+
+export const Fallback: StoryFn = () => (
+  <>
+    <Avatar size="tiny">
+      <Avatar.Image src="/broken" />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size="small">
+      <Avatar.Image src="/broken" />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size="medium">
+      <Avatar.Image src="/broken" />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size="large">
+      <Avatar.Image src="/broken" />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size="huge">
+      <Avatar.Image src="/broken" />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+  </>
+);
+export const Group: StoryFn<AvatarProps & AvatarGroupProps> = (args) => (
+  <Avatar.Group max={args.max} unstackOnHover={args.unstackOnHover}>
+    <Avatar size={args.size} variant={args.variant}>
+      <Avatar.Image src={placeholder01} />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size={args.size} variant={args.variant}>
+      <Avatar.Image src={placeholder02} />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size={args.size} variant={args.variant}>
+      <Avatar.Image src={placeholder03} />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size={args.size} variant={args.variant}>
+      <Avatar.Image src={placeholder01} />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+    <Avatar size={args.size} variant={args.variant}>
+      <Avatar.Image src={placeholder02} />
+      <Avatar.FallBack>{getInitials('Harry Potter')}</Avatar.FallBack>
+    </Avatar>
+  </Avatar.Group>
+);

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

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+type AvatarContextValue = {
+  imageLoadingStatus: ImageLoadingStatus;
+  onImageLoadingStatusChange: (status: ImageLoadingStatus) => void;
+} | null;
+
+export const AvatarContext = createContext<AvatarContextValue>(null);
+
+export const useAvatarContext = () => {
+  const context = useContext(AvatarContext);
+
+  if (context == null) {
+    throw new Error('Avatar components must be wrapped in <Avatar />');
+  }
+
+  return context;
+};

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

@@ -0,0 +1,136 @@
+import {
+  Children,
+  FC,
+  forwardRef,
+  ImgHTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { Size } from '../../../styled/types';
+import { Container, GroupContainer } from './style';
+import { AvatarContext, ImageLoadingStatus, useAvatarContext } from './context';
+import { useCallbackRef } from '../../../hooks';
+import { useImageLoadingStatus } from './useImageLoadingStatus';
+import { Skeleton } from '../../../components';
+
+// * -------------------------------------------------------------------------------------------------
+// * Avatar Image
+// * -----------------------------------------------------------------------------------------------*/
+
+interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+}
+
+const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
+  ({ onLoadingStatusChange, src, ...imageProps }, ref) => {
+    const context = useAvatarContext();
+    const imageLoadingStatus = useImageLoadingStatus(src);
+    const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {
+      if (onLoadingStatusChange) {
+        onLoadingStatusChange(status);
+      }
+      context.onImageLoadingStatusChange(status);
+    });
+
+    useLayoutEffect(() => {
+      if (imageLoadingStatus !== 'idle') {
+        handleLoadingStatusChange(imageLoadingStatus);
+      }
+    }, [imageLoadingStatus, handleLoadingStatusChange]);
+
+    if (imageLoadingStatus === 'loading') {
+      return <Skeleton variant="circular" width="100%" height="100%" />;
+    }
+
+    return imageLoadingStatus === 'loaded' ? <img {...imageProps} ref={ref} src={src} /> : null;
+  },
+);
+AvatarImage.displayName = 'AvatarImage';
+
+// * -------------------------------------------------------------------------------------------------
+// * FallBack
+// * -----------------------------------------------------------------------------------------------*/
+
+interface AvatarFallBackProps {
+  delayMs?: number;
+}
+
+export const AvatarFallBack = forwardRef<HTMLSpanElement, PropsWithChildren<AvatarFallBackProps>>(
+  ({ children, delayMs = 250 }, ref) => {
+    const { imageLoadingStatus } = useAvatarContext();
+    const [canRender, setCanRender] = useState(delayMs === undefined);
+
+    useEffect(() => {
+      if (delayMs !== undefined) {
+        const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+        return () => window.clearTimeout(timerId);
+      }
+    }, [delayMs]);
+
+    return canRender && imageLoadingStatus !== 'loaded' ? <span ref={ref}>{children}</span> : null;
+  },
+);
+AvatarFallBack.displayName = 'AvatarFallBack';
+
+// * -------------------------------------------------------------------------------------------------
+// * FallBack
+// * -----------------------------------------------------------------------------------------------*/
+
+export interface AvatarGroupProps {
+  /// Max amount of avatars that should be shown
+  max?: number;
+  /// Unstack avatar on hover
+  unstackOnHover?: boolean;
+}
+
+export const AvatarGroup: FC<PropsWithChildren<AvatarGroupProps>> = ({ max = 3, children, unstackOnHover = false }) => {
+  // get size of first child
+  const size = (Children.toArray(children)[0] as ReactElement<AvatarProps>).props.size;
+
+  return (
+    <GroupContainer size={size ?? 'medium'} unStackOnHover={unstackOnHover}>
+      {Children.toArray(children).slice(0, Math.min(Children.count(children), max))}
+    </GroupContainer>
+  );
+};
+
+// * -------------------------------------------------------------------------------------------------
+// * Avatar
+// * -----------------------------------------------------------------------------------------------*/
+
+interface SubComponentTypes {
+  FallBack: typeof AvatarFallBack;
+  Image: typeof AvatarImage;
+  Group: typeof AvatarGroup;
+}
+
+export type AvatarVariant = 'square' | 'rounded' | 'circle';
+
+export interface AvatarProps {
+  size?: Size;
+  variant?: AvatarVariant;
+}
+
+// TODO: skeleton loading
+export const Avatar: FC<PropsWithChildren<AvatarProps>> & SubComponentTypes = ({
+  size = 'medium',
+  variant,
+  children,
+}) => {
+  const [imageLoadingStatus, setImageLoadingStatus] = useState<ImageLoadingStatus>('idle');
+
+  return (
+    <AvatarContext.Provider value={{ imageLoadingStatus, onImageLoadingStatusChange: setImageLoadingStatus }}>
+      <Container size={size} variant={variant}>
+        {children}
+      </Container>
+    </AvatarContext.Provider>
+  );
+};
+
+Avatar.FallBack = AvatarFallBack;
+Avatar.Image = AvatarImage;
+Avatar.Group = AvatarGroup;