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

package/src/components/data/Stats/Sparkline.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+
+export interface SparklineProps {
+  data: number[];
+  color?: string;
+  width?: string | number;
+  height?: string | number;
+  strokeWidth?: number;
+}
+
+/**
+ * Sparkline component - renders a simple SVG line chart for trend visualization
+ * Designed to be used as Stats.Sparkline for showing mini trend charts
+ */
+export const Sparkline: FC<SparklineProps> = ({
+  data,
+  color = 'currentColor',
+  width = '100%',
+  height = '100%',
+  strokeWidth = 2,
+}) => {
+  if (!data || data.length === 0) return null;
+
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+
+  const points = data
+    .map((value, index) => {
+      const divisor = Math.max(data.length - 1, 1); // in case of single data point
+      const x = (index / divisor) * 100;
+      const y = 100 - ((value - min) / range) * 100;
+      return `${x},${y}`;
+    })
+    .join(' ');
+
+  return (
+    <svg width={width} height={height} viewBox="0 0 100 100" preserveAspectRatio="none">
+      <polyline
+        points={points}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+};

package/src/components/data/Stats/Stat.tsx

@@ -0,0 +1,192 @@
+import { FC, useContext, ReactNode, cloneElement, isValidElement } from 'react';
+import { styled, Size } from '../../../styled';
+import { StatContext, Direction } from './context';
+import { AiOutlineArrowUp, AiOutlineArrowDown } from 'react-icons/ai';
+
+const Container = styled.div<{ isGrouped: boolean; direction: Direction; size: Size }>`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding: ${({ theme, size }) => {
+    switch (size) {
+      case 'tiny':
+        return theme.spacing['0_5'];
+      case 'small':
+        return theme.spacing['1'];
+      case 'medium':
+        return theme.spacing['2'];
+      case 'large':
+        return theme.spacing['3'];
+      case 'huge':
+        return theme.spacing['4'];
+    }
+  }};
+
+  ${({ isGrouped, direction, theme }) => {
+    if (isGrouped) {
+      if (direction === 'vertical') {
+        return `
+          &:not(:last-child) {
+            border-bottom: 1px solid ${theme.colors.secondary};
+          }
+          &:first-child {
+            border-top-left-radius: ${theme.borderRadius.medium};
+            border-top-right-radius: ${theme.borderRadius.medium};
+          }
+          &:last-child {
+            border-bottom-left-radius: ${theme.borderRadius.medium};
+            border-bottom-right-radius: ${theme.borderRadius.medium};
+          }
+        `;
+      } else {
+        return `
+          &:not(:last-child) {
+            border-right: 1px solid ${theme.colors.secondary};
+          }
+          &:first-child {
+            border-top-left-radius: ${theme.borderRadius.medium};
+            border-bottom-left-radius: ${theme.borderRadius.medium};
+          }
+          &:last-child {
+            border-top-right-radius: ${theme.borderRadius.medium};
+            border-bottom-right-radius: ${theme.borderRadius.medium};
+          }
+        `;
+      }
+    } else {
+      return `
+        border-radius: ${theme.borderRadius.medium};
+        border: 1px solid ${theme.colors.secondary};
+      `;
+    }
+  }};
+
+  dt {
+    font-size: ${({ theme, size }) => {
+      switch (size) {
+        case 'tiny':
+          return theme.fontSize.tiny;
+        case 'small':
+          return theme.fontSize.small;
+        case 'medium':
+          return theme.fontSize.medium;
+        case 'large':
+          return theme.fontSize.mediumLarge;
+        case 'huge':
+          return theme.fontSize.large;
+      }
+    }};
+    color: ${({ theme }) => theme.colors.textAlt};
+    margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+  }
+
+  dd {
+    font-weight: bold;
+    color: ${({ theme }) => theme.colors.white};
+    font-size: ${({ theme, size }) => {
+      switch (size) {
+        case 'tiny':
+          return theme.fontSize.small;
+        case 'small':
+          return theme.fontSize.medium;
+        case 'medium':
+          return theme.fontSize.mediumLarge;
+        case 'large':
+          return theme.fontSize.large;
+        case 'huge':
+          return theme.fontSize.huge;
+      }
+    }};
+    color: ${({ theme }) => theme.colors.text};
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: ${({ theme }) => theme.spacing['1']};
+
+    &.placeholder {
+      min-width: 80%;
+      min-height: 25px;
+    }
+  }
+`;
+
+const TrendContainer = styled.span<{ direction: 'up' | 'down' }>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: normal;
+  color: ${({ theme, direction }) => (direction === 'up' ? theme.colors.success : theme.colors.error)};
+`;
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-right: ${({ theme }) => theme.spacing['0_5']};
+`;
+
+export interface TrendConfig {
+  direction: 'up' | 'down';
+  value: string | number;
+}
+
+export interface StatProps {
+  description: string;
+  value: string | number | ReactNode;
+  icon?: ReactNode;
+  trend?: TrendConfig;
+  isLoading?: boolean;
+  size?: Size;
+}
+
+export const Stat: FC<StatProps> = ({ description, value, icon, trend, isLoading, size: propSize }) => {
+  const { grouped, direction, size: contextSize } = useContext(StatContext);
+  const size = propSize ?? contextSize;
+
+  const renderValue = () => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      return value.toString();
+    }
+    return value;
+  };
+
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (isValidElement(icon)) {
+      return <IconWrapper>{cloneElement(icon, { size: 20 } as any)}</IconWrapper>;
+    }
+    return <IconWrapper>{icon}</IconWrapper>;
+  };
+
+  const renderTrend = () => {
+    if (!trend) return null;
+    const TrendIcon = trend.direction === 'up' ? AiOutlineArrowUp : AiOutlineArrowDown;
+    return (
+      <TrendContainer direction={trend.direction}>
+        <TrendIcon size={14} />
+        {trend.value}
+      </TrendContainer>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <Container isGrouped={grouped} direction={direction} size={size} aria-busy="true" aria-label="Loading">
+        <dt>{description}</dt>
+        <dd className="placeholder"></dd>
+      </Container>
+    );
+  }
+
+  return (
+    <Container isGrouped={grouped} direction={direction} size={size}>
+      <dt>{description}</dt>
+      <dd>
+        {renderIcon()}
+        {renderValue()}
+        {renderTrend()}
+      </dd>
+    </Container>
+  );
+};

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Stats, StatsProps } from '../../../components';
+import { AiOutlineDollar, AiOutlineUser, AiOutlineShoppingCart, AiOutlineEye } from 'react-icons/ai';
+
+export default {
+  title: 'Data/Stat',
+  component: Stats,
+  args: {
+    direction: 'horizontal',
+    grouped: false,
+    size: 'medium',
+  },
+} as Meta<StatsProps>;
+
+export const HorizontalGrouped: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const HorizontalSeparated: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped={false}>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalGrouped: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <Stats direction="vertical" grouped>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalSeparated: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <Stats direction="vertical" grouped={false}>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const LoadingState: StoryFn<StatsProps> = (args) => {
+  return (
+    <div style={{ width: '700px' }}>
+      <Stats direction={args.direction} grouped={args.grouped}>
+        <Stats.Stat isLoading description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const WithIcons: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped>
+        <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+        <Stats.Stat description="Active Users" value={1234} icon={<AiOutlineUser />} />
+        <Stats.Stat description="Total Orders" value="567" icon={<AiOutlineShoppingCart />} />
+      </Stats>
+    </div>
+  );
+};
+
+export const WithTrends: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped>
+        <Stats.Stat
+          description="Revenue"
+          value="$12,345"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+12.5%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value={1234}
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'down', value: '-5.2%' }}
+        />
+        <Stats.Stat
+          description="Page Views"
+          value="45.2K"
+          icon={<AiOutlineEye />}
+          trend={{ direction: 'up', value: '+8%' }}
+        />
+      </Stats>
+    </div>
+  );
+};
+
+export const SizeVariants: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <h3>Small</h3>
+        <Stats direction="horizontal" grouped size="small">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+      <div>
+        <h3>Medium (Default)</h3>
+        <Stats direction="horizontal" grouped size="medium">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+      <div>
+        <h3>Large</h3>
+        <Stats direction="horizontal" grouped size="large">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+    </div>
+  );
+};
+
+export const AllFeatures: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped size="medium">
+        <Stats.Stat
+          description="Total Revenue"
+          value="$45,231"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+20.1%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value="2,345"
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'up', value: '+12%' }}
+        />
+        <Stats.Stat
+          description="Orders"
+          value="892"
+          icon={<AiOutlineShoppingCart />}
+          trend={{ direction: 'down', value: '-3.5%' }}
+        />
+        <Stats.Stat description="Page Views" value="123.4K" icon={<AiOutlineEye />} />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalWithAllFeatures: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '350px' }}>
+      <Stats direction="vertical" grouped size="medium">
+        <Stats.Stat
+          description="Total Revenue"
+          value="$45,231"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+20.1%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value="2,345"
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'up', value: '+12%' }}
+        />
+        <Stats.Stat
+          description="Total Orders"
+          value="892"
+          icon={<AiOutlineShoppingCart />}
+          trend={{ direction: 'down', value: '-3.5%' }}
+        />
+      </Stats>
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+import { Size } from '../../../styled/types';
+
+export type Direction = 'horizontal' | 'vertical';
+
+interface StatsContextValue {
+  grouped: boolean;
+  direction: Direction;
+  size: Size;
+}
+
+const defaultValue: StatsContextValue = {
+  grouped: false,
+  direction: 'vertical',
+  size: 'medium',
+};
+
+export const StatContext = createContext<StatsContextValue>(defaultValue);

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

@@ -0,0 +1,62 @@
+import { FC, PropsWithChildren, Children, isValidElement } from 'react';
+import { styled, Size } from '../../../styled';
+import { Stat } from './Stat';
+import { Sparkline } from './Sparkline';
+import { StatContext, Direction } from './context';
+
+export const Container = styled.dl<{ direction: Direction; grouped: boolean; count: number }>`
+  display: grid;
+  ${({ direction, count }) => {
+    return direction === 'horizontal'
+      ? `grid-template-columns: repeat(${count},1fr)`
+      : `grid-template-rows: repeat(${count},1fr)`;
+  }};
+  border: ${({ grouped, theme }) => (grouped ? `1px solid ${theme.colors.secondary}` : 'none')};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  gap: ${({ theme, direction, grouped }) => {
+    if (grouped) return 0;
+    return direction === 'vertical' ? `${theme.spacing['2']} 0` : `0 ${theme.spacing['2']}`;
+  }};
+`;
+
+export interface StatsProps {
+  direction?: Direction;
+  grouped: boolean;
+  size?: Size;
+}
+
+interface SubComponents {
+  Stat: typeof Stat;
+  Sparkline: typeof Sparkline;
+}
+
+export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
+  direction = 'vertical',
+  grouped,
+  size = 'medium',
+  children,
+}) => {
+  // throw error if child is not a Stat component
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (child.type !== Stat) {
+      throw new Error(`Stats component only accepts Stat components as children. Received ${child.type} instead.`);
+    }
+  });
+
+  return (
+    <Container direction={direction} grouped={grouped} count={Children.count(children)}>
+      <StatContext.Provider value={{ grouped, direction, size }}>{children}</StatContext.Provider>
+    </Container>
+  );
+};
+
+Stats.Stat = Stat;
+Stats.Sparkline = Sparkline;
+
+export type { Direction } from './context';
+export type { Size } from '../../../styled';
+export type { TrendConfig } from './Stat';
+export type { SparklineProps } from './Sparkline';

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

@@ -0,0 +1,146 @@
+import React, { FC, useEffect } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Table, TableProps } from '.';
+import { createColumnHelper } from '@tanstack/react-table';
+import { Chip } from '../../../components';
+import { useTableActions } from '../../../hooks';
+
+type User = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  status: string;
+  progress: number;
+};
+
+const data: User[] = [
+  {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 32,
+    visits: 32,
+    status: 'complicated',
+    progress: 66,
+  },
+  {
+    firstName: 'Jane',
+    lastName: 'Doe',
+    age: 30,
+    visits: 30,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Sam',
+    lastName: 'Doe',
+    age: 28,
+    visits: 28,
+    status: 'married',
+    progress: 0,
+  },
+  {
+    firstName: 'Sally',
+    lastName: 'Doe',
+    age: 26,
+    visits: 26,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Bob',
+    lastName: 'Doe',
+    age: 24,
+    visits: 24,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Barbara',
+    lastName: 'Doe',
+    age: 22,
+    visits: 22,
+    status: 'single',
+    progress: 100,
+  },
+];
+
+const columnHelper = createColumnHelper<User>();
+const columns = [
+  columnHelper.accessor('firstName', {
+    id: 'firstName',
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    id: 'lastName',
+    header: 'Last Name',
+    cell: (info) => <i>{info.getValue()}</i>,
+  }),
+  columnHelper.accessor('age', {
+    id: 'age',
+    header: 'Age',
+    cell: (info) => info.renderValue(),
+  }),
+  columnHelper.accessor('visits', {
+    id: 'visits',
+    header: 'Visits',
+  }),
+  columnHelper.accessor('status', {
+    id: 'status',
+    header: 'Status',
+    cell: (info) => <Chip variant="outline" color="primary" label={info.getValue()} />,
+  }),
+  columnHelper.accessor('progress', {
+    id: 'progress',
+    header: 'Profile Progress',
+  }),
+];
+
+export default {
+  title: 'Data/Table',
+  component: Table,
+  args: {
+    sort: false,
+    refetching: true,
+    isLoading: false,
+    data,
+  },
+} as Meta<TableProps<User>>;
+
+const Users: FC<TableProps<User>> = (args) => {
+  const { pagination, sorting, columnSearch, columnFilters, rowSelection } = useTableActions<User>();
+
+  useEffect(() => {
+    pagination.setPaginationState({
+      ...pagination.paginationState,
+      pageSize: 1,
+    });
+  }, []);
+
+  return (
+    <Table
+      id="story-table"
+      data={args.data}
+      columns={columns}
+      pagination={{
+        ...pagination,
+        pageOptions: {
+          pageCount: 10,
+          total: 20,
+        },
+      }}
+      isLoading={args.isLoading}
+      columnFiltering={columnFilters}
+      columnSearch={columnSearch}
+      rowSelection={rowSelection}
+      sorting={sorting}
+    />
+  );
+};
+
+export const EmptyTable: StoryFn<TableProps<User>> = (args) => {
+  return <Users {...args} data={[]} />;
+};
+export const DataTable: StoryFn<TableProps<User>> = (args) => <Users {...args} />;