@takaro/lib-components 0.0.1

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

@@ -0,0 +1,141 @@
+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 { InnerChartProps, Margin } from '../util';
+import { useTheme } from '../../../hooks';
+import { useGradients } from '../useGradients';
+
+const formatTicks = (val: NumberLike) => String(val);
+
+export interface RadialLineChartProps<T> {
+  name: string;
+  data: T[];
+  margin?: Margin;
+  xAccessor: (d: T) => number;
+  yAccessor: (d: T) => number;
+}
+
+const defaultMargin = { top: 10, right: 0, bottom: 25, left: 40 };
+export const RadialLineChart = <T,>({
+  data,
+  yAccessor,
+  xAccessor,
+  name,
+  margin = defaultMargin,
+}: RadialLineChartProps<T>) => {
+  return (
+    <>
+      <ParentSize>
+        {(parent) => (
+          <Chart<T>
+            name={name}
+            data={data}
+            width={parent.width}
+            height={parent.height}
+            margin={margin}
+            yAccessor={yAccessor}
+            xAccessor={xAccessor}
+          />
+        )}
+      </ParentSize>
+    </>
+  );
+};
+
+type InnerRadialLineChartProps<T> = InnerChartProps & RadialLineChartProps<T>;
+
+const Chart = <T,>({ width, xAccessor, yAccessor, data, name, height }: InnerRadialLineChartProps<T>) => {
+  const theme = useTheme();
+  const gradients = useGradients(name);
+
+  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 firstPoint = yAccessor(data[0]);
+  const lastPoint = yAccessor(data[data.length - 1]);
+
+  const angle = (d: T) => xScale(xAccessor(d)) ?? 0;
+  const radius = (d: T) => yScale(yAccessor(d)) ?? 0;
+  const padding = 15;
+
+  // 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 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={2}
+                strokeOpacity={0.8}
+                strokeLinecap="round"
+                fill="none"
+                stroke={theme.colors.primary}
+              />
+            );
+          }}
+        </LineRadial>
+        {[firstPoint, lastPoint].map((d, i) => {
+          const cx = ((xScale(d) ?? 0) * Math.PI) / 180;
+          const cy = -(yScale(d) ?? 0);
+          return <circle key={`line-cap-${i}`} cx={cx} cy={cy} fill={theme.colors.primary} r={2} />;
+        })}
+      </Group>
+    </svg>
+  );
+};

package/src/components/charts/index.tsx

@@ -0,0 +1,20 @@
+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 { RadialBarChart } from './RadialBarChart';
+export type { RadialBarChartProps } from './RadialBarChart';

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,40 @@
+import { defaultStyles } from '@visx/tooltip';
+import { ThemeType } from '../../styled';
+
+export interface ChartProps {
+  /// Unique identifier for the chart
+  name: string;
+  showGrid?: boolean;
+  axisXLabel?: string;
+  axisYLabel?: string;
+  showAxisX?: boolean;
+  showAxisY?: boolean;
+}
+
+export interface InnerChartProps extends ChartProps {
+  width: number;
+  height: number;
+}
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: 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,
+});
+
+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
+];

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,132 @@
+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) => {
+      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;
+  }
+);
+
+// * -------------------------------------------------------------------------------------------------
+// * 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;
+  }
+);
+
+// * -------------------------------------------------------------------------------------------------
+// * 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;

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

@@ -0,0 +1,124 @@
+import { AvatarVariant } from '.';
+import { styled, Size } from '../../../styled';
+
+export const GroupContainer = styled.div<{ size: Size; unStackOnHover: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    div {
+      ${({ unStackOnHover }) => (unStackOnHover ? 'margin-left: 0;' : '')}
+    }
+  }
+
+  div {
+    transition: margin-left 0.2s ease-in-out;
+    /* mind the negative sign here */
+    margin-left: -${({ theme }) => theme.spacing['5']};
+
+    :first-child {
+      margin-left: ${({ theme }) => theme.spacing[0]};
+    }
+
+    ${({ size, theme }) => {
+      switch (size) {
+        case 'tiny':
+          return `margin-left: -${theme.spacing['0_25']};`;
+        case 'small':
+          return `margin-left: -${theme.spacing['1']};`;
+        case 'medium':
+          return `margin-left: -${theme.spacing['3']};`;
+        case 'large':
+          return `margin-left: -${theme.spacing['8']};`;
+        case 'huge':
+          return `margin-left: -${theme.spacing['10']};`;
+      }
+    }}
+  }
+`;
+
+export const Container = styled.div<{ size: Size; variant?: AvatarVariant }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+
+  img {
+    width: 100%;
+    height: 100%;
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'square':
+          return 'border-radius: 0;';
+        case 'rounded':
+          return `border-radius: ${theme.borderRadius['small']};`;
+        default:
+          return 'border-radius: 50%;';
+      }
+    }}
+  }
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 2px is the size of the border */
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'square':
+          return 'border-radius: 0;';
+        case 'rounded':
+          return `border-radius: ${theme.borderRadius['small']};`;
+        default:
+          return 'border-radius: 50%;';
+      }
+    }}
+    background-color: ${({ theme }) => theme.colors.background};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    margin-left: 0;
+  }
+
+  ${({ size, theme }) => {
+    switch (size) {
+      case 'tiny':
+        return `
+          width: 2rem;
+          height: 2rem;
+          font-size: .8rem;
+          line-height: .8rem;
+        `;
+      case 'small':
+        return `
+          width: 3.125rem;
+          height: 3.125rem;
+          font-size: ${theme.fontSize.small};
+          line-height: 3.125rem;
+        `;
+      case 'medium':
+        return `
+          width: 6rem;
+          height: 6rem;
+          font-size: 2rem;
+          line-height: 2rem;
+        `;
+      case 'large':
+        return `
+          width: 12.5rem;
+          height: 12.5rem;
+          font-size: 2.8rem;
+          line-height: 2.8rem;
+        `;
+      case 'huge':
+        return `
+          width: 16rem;
+          height: 16rem;
+          font-size: 3rem;
+          line-height: 3rem;
+        `;
+    }
+  }}
+`;

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

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useState } from 'react';
+import { ImageLoadingStatus } from './context';
+
+export function useImageLoadingStatus(src?: string) {
+  const [loadingStatus, setLoadingStatus] = useState<ImageLoadingStatus>('idle');
+
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus('error');
+      return;
+    }
+
+    let isMounted = true;
+    const image = new window.Image();
+
+    const updateStatus = (status: ImageLoadingStatus) => () => {
+      if (!isMounted) return;
+      setLoadingStatus(status);
+    };
+
+    setLoadingStatus('loading');
+    image.onload = updateStatus('loaded');
+    image.onerror = updateStatus('error');
+    image.src = src;
+
+    return () => {
+      isMounted = false;
+    };
+  }, [src]);
+
+  return loadingStatus;
+}