@takaro/lib-components 0.4.8 → 0.4.10

package/src/components/feedback/ProgressBar/ProgressBar.stories.tsx

@@ -6,11 +6,7 @@ import { styled } from '../../../styled';
 
 const ButtonContainer = styled.div`
   display: flex;
-  button {
-    &:first-child {
-      margin: 0 1rem;
-    }
-  }
+  gap: ${({ theme }) => theme.spacing[1]};
 `;
 
 export default {
@@ -18,22 +14,25 @@ export default {
   component: ProgressBar,
   args: {
     mode: 'indeterminate',
-    showValue: false,
+    showPercentage: false,
   },
 } as Meta<ProgressBarProps>;
 
-export const Default: StoryFn<ProgressBarProps> = (args) => <ProgressBar {...args} />;
-
-export const Determinate: StoryFn<ProgressBarProps> = () => {
+export const Default: StoryFn<ProgressBarProps> = (args) => {
   const [value, setValue] = useState<number>(0);
 
   return (
     <>
-      <ProgressBar mode="determinate" showPercentage value={value} />
-      <ButtonContainer>
-        <button onClick={() => setValue(value + 5)}>+5</button>
-        <button onClick={() => setValue(value + 10)}>+10</button>
-      </ButtonContainer>
+      <ProgressBar {...args} value={value} />
+
+      {args.mode === 'determinate' && (
+        <ButtonContainer>
+          <button onClick={() => setValue(value - 10)}>-10</button>
+          <button onClick={() => setValue(value - 5)}>-5</button>
+          <button onClick={() => setValue(value + 5)}>+5</button>
+          <button onClick={() => setValue(value + 10)}>+10</button>
+        </ButtonContainer>
+      )}
     </>
   );
 };

package/src/components/feedback/ProgressBar/index.tsx

@@ -124,7 +124,7 @@ export const ProgressBar: FC<ProgressBarProps> = ({
     return (
       <Container>
         <Progress color={color} progress={value > minFill ? value : value == 0 ? 0 : minFill} size={size} />
-        {showPercentage && <Label>{Math.min(value, 100)}%</Label>}
+        {showPercentage && <Label>{Math.max(0, Math.min(value, 100))}%</Label>}
       </Container>
     );
   }

package/src/components/inputs/DurationField/__tests__/Generic.test.tsx

@@ -0,0 +1,12 @@
+import { Duration } from 'luxon';
+import { describe, it, expect } from 'vitest';
+
+describe('DurationField - Luxon year conversion bug', () => {
+  it('should correctly round-trip 20 years through milliseconds without rescale drift', () => {
+    const originalYears = 20;
+    const millis = Duration.fromObject({ years: originalYears }).toMillis();
+    const rescaled = Duration.fromMillis(millis).rescale().toObject();
+
+    expect(rescaled).toEqual({ years: originalYears });
+  });
+});

package/src/components/visual/Card/CardTitle.tsx

@@ -9,6 +9,12 @@ const Container = styled.div`
   padding: ${({ theme }) => theme.spacing[1]};
 `;
 
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+`;
+
 interface CardTitleProps {
   label: string;
 }
@@ -17,7 +23,7 @@ export const CardTitle: FC<PropsWithChildren<CardTitleProps>> = (props) => {
   return (
     <Container>
       <h2>{props.label}</h2>
-      <div>{props.children}</div>
+      <Inner>{props.children}</Inner>
     </Container>
   );
 };

package/src/components/visual/Card/index.tsx

@@ -13,10 +13,6 @@ const Container = styled.div<{ canClick: boolean; variant: Variant }>`
   cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
   height: fit-content;
 
-  &:focus-within {
-    border-color: none;
-  }
-
   &:focus {
     border-color: ${({ theme, canClick }) => (canClick ? theme.colors.primary : theme.colors.backgroundAccent)};
   }

package/src/helpers/formatNumber.ts

@@ -0,0 +1,6 @@
+export function formatNumber(value: number, decimals: number = 0): string {
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(value);
+}

package/src/helpers/index.ts

@@ -3,3 +3,4 @@ export { SnackbarProvider } from './getSnackbarProvider';
 export * from './regexprs';
 export { getTransition } from './getTransition';
 export { camelCaseToSpaces } from './camelCaseToSpaces';
+export { formatNumber } from './formatNumber';

package/src/components/charts/echarts/EChartsArea.stories.tsx

@@ -1,139 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsArea, EChartsAreaProps } from './EChartsArea';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-import { faker } from '@faker-js/faker';
-
-export default {
-  title: 'Charts/ECharts/Area',
-  component: EChartsArea,
-  args: {
-    smooth: true,
-    gradient: true,
-    showGrid: true,
-    showLegend: true,
-    xAxisLabel: 'Date',
-    yAxisLabel: 'Revenue ($)',
-    title: 'Area Chart Example',
-  },
-} as Meta<EChartsAreaProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface RevenueData {
-  date: string;
-  revenue: number;
-}
-
-// Generate sample revenue data
-function generateRevenueData(days: number = 30): RevenueData[] {
-  const data: RevenueData[] = [];
-  const now = new Date();
-  const baseValue = 1000;
-
-  for (let i = days - 1; i >= 0; i--) {
-    const date = new Date(now);
-    date.setDate(date.getDate() - i);
-
-    // Add some realistic variation
-    const dayOfWeek = date.getDay();
-    const weekendBonus = dayOfWeek === 0 || dayOfWeek === 6 ? 300 : 0;
-    const randomVariation = faker.number.int({ min: -200, max: 400 });
-    const trendGrowth = i * 5; // Slight upward trend
-
-    data.push({
-      date: date.toLocaleDateString(),
-      revenue: baseValue + weekendBonus + randomVariation + trendGrowth,
-    });
-  }
-
-  return data;
-}
-
-export const Default: StoryFn<EChartsAreaProps<RevenueData>> = (args) => {
-  const data = generateRevenueData();
-
-  return (
-    <Wrapper>
-      <EChartsArea<RevenueData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.date}
-        yAccessor={(d) => d.revenue}
-        seriesName="Daily Revenue"
-      />
-    </Wrapper>
-  );
-};
-
-export const NoGradient: StoryFn<EChartsAreaProps<RevenueData>> = (args) => {
-  const data = generateRevenueData();
-
-  return (
-    <Wrapper>
-      <EChartsArea<RevenueData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.date}
-        yAccessor={(d) => d.revenue}
-        seriesName="Revenue"
-        gradient={false}
-        title="Revenue Trend"
-        subtitle="Solid fill area chart"
-      />
-    </Wrapper>
-  );
-};
-
-export const ShopAnalytics: StoryFn = () => {
-  const data = generateRevenueData(90);
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Revenue Over Time" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsArea
-              data={data}
-              xAccessor={(d) => d.date}
-              yAccessor={(d) => d.revenue}
-              seriesName="Revenue"
-              smooth={true}
-              gradient={true}
-              showGrid={true}
-              yAxisLabel="Revenue ($)"
-              tooltipFormatter={(params: any) => {
-                const value = params[0].value;
-                return `${params[0].name}<br/>Revenue: $${value.toLocaleString()}`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const StackedArea: StoryFn<EChartsAreaProps<RevenueData>> = (args) => {
-  const data = generateRevenueData(20);
-
-  return (
-    <Wrapper>
-      <EChartsArea<RevenueData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.date}
-        yAccessor={(d) => d.revenue}
-        seriesName="Product Sales"
-        stack={true}
-        title="Stacked Revenue"
-        subtitle="Multiple product categories"
-      />
-    </Wrapper>
-  );
-};

package/src/components/charts/echarts/EChartsArea.tsx

@@ -1,139 +0,0 @@
-import { FC, useMemo } from 'react';
-import { EChartsOption } from 'echarts';
-import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
-import { useTheme } from '../../../hooks';
-
-export interface EChartsAreaProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
-  data: T[];
-  xAccessor: (d: T) => string | number | Date;
-  yAccessor: (d: T) => number;
-  seriesName?: string;
-  smooth?: boolean;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-  title?: string;
-  subtitle?: string;
-  gradient?: boolean;
-  tooltipFormatter?: (params: any) => string;
-  stack?: boolean;
-}
-
-export const EChartsArea: FC<EChartsAreaProps> = ({
-  data,
-  xAccessor,
-  yAccessor,
-  seriesName = 'Value',
-  smooth = true,
-  showGrid = true,
-  showLegend = false,
-  xAxisLabel,
-  yAxisLabel,
-  title,
-  subtitle,
-  gradient = true,
-  tooltipFormatter,
-  stack = false,
-  ...chartProps
-}) => {
-  const theme = useTheme();
-
-  const option: EChartsOption = useMemo(() => {
-    const xData = data.map(xAccessor);
-    const yData = data.map(yAccessor);
-
-    return {
-      title: title
-        ? {
-            text: title,
-            subtext: subtitle,
-            left: 'center',
-          }
-        : undefined,
-      legend: showLegend
-        ? {
-            data: [seriesName],
-            top: 30,
-          }
-        : undefined,
-      grid: showGrid
-        ? {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          }
-        : undefined,
-      tooltip: {
-        trigger: 'axis',
-        formatter: tooltipFormatter,
-      },
-      xAxis: {
-        type: 'category',
-        data: xData,
-        name: xAxisLabel,
-        nameLocation: 'middle',
-        nameGap: 30,
-        boundaryGap: false,
-      },
-      yAxis: {
-        type: 'value',
-        name: yAxisLabel,
-        nameLocation: 'middle',
-        nameGap: 50,
-      },
-      series: [
-        {
-          name: seriesName,
-          type: 'line',
-          data: yData,
-          smooth: smooth,
-          stack: stack ? 'total' : undefined,
-          areaStyle: gradient
-            ? {
-                color: {
-                  type: 'linear',
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: theme.colors.primary + '80', // 50% opacity
-                    },
-                    {
-                      offset: 1,
-                      color: theme.colors.primary + '10', // 6% opacity
-                    },
-                  ],
-                },
-              }
-            : {},
-          emphasis: {
-            focus: 'series',
-          },
-        },
-      ],
-    };
-  }, [
-    data,
-    xAccessor,
-    yAccessor,
-    seriesName,
-    smooth,
-    showGrid,
-    showLegend,
-    xAxisLabel,
-    yAxisLabel,
-    title,
-    subtitle,
-    gradient,
-    tooltipFormatter,
-    stack,
-    theme,
-  ]);
-
-  return <ResponsiveECharts option={option} {...chartProps} />;
-};

package/src/components/charts/echarts/EChartsBar.stories.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { EChartsBar, EChartsBarProps } from './EChartsBar';
-import { styled } from '../../../styled';
-import { Card } from '../../../components';
-import { faker } from '@faker-js/faker';
-
-export default {
-  title: 'Charts/ECharts/Bar',
-  component: EChartsBar,
-  args: {
-    horizontal: false,
-    showGrid: true,
-    showLegend: true,
-    xAxisLabel: 'Category',
-    yAxisLabel: 'Value',
-    title: 'Bar Chart Example',
-    colorBy: 'data',
-  },
-} as Meta<EChartsBarProps>;
-
-const Wrapper = styled.div`
-  height: 500px;
-  width: 100%;
-`;
-
-interface CategoryData {
-  name: string;
-  value: number;
-}
-
-// Generate sample category data
-function generateCategoryData(count: number = 10): CategoryData[] {
-  const categories = [
-    'Weapons',
-    'Armor',
-    'Tools',
-    'Food',
-    'Materials',
-    'Potions',
-    'Books',
-    'Gems',
-    'Artifacts',
-    'Misc',
-  ];
-
-  return categories.slice(0, count).map((name) => ({
-    name,
-    value: faker.number.int({ min: 10, max: 200 }),
-  }));
-}
-
-export const Default: StoryFn<EChartsBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData(8);
-
-  return (
-    <Wrapper>
-      <EChartsBar<CategoryData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.name}
-        yAccessor={(d) => d.value}
-        seriesName="Sales"
-      />
-    </Wrapper>
-  );
-};
-
-export const HorizontalBar: StoryFn<EChartsBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData(6);
-
-  return (
-    <Wrapper>
-      <EChartsBar<CategoryData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.name}
-        yAccessor={(d) => d.value}
-        seriesName="Inventory"
-        horizontal={true}
-        title="Item Inventory"
-        subtitle="Current stock levels"
-        xAxisLabel="Quantity"
-        yAxisLabel=""
-      />
-    </Wrapper>
-  );
-};
-
-export const TopSellingItems: StoryFn = () => {
-  const products = [
-    { name: 'Diamond Sword', revenue: 15000 },
-    { name: 'Iron Pickaxe', revenue: 12000 },
-    { name: 'Golden Apple', revenue: 9500 },
-    { name: 'Enchanted Book', revenue: 8000 },
-    { name: 'Ender Pearl', revenue: 6500 },
-  ];
-
-  return (
-    <Wrapper>
-      <Card variant="outline">
-        <Card.Title label="Top Selling Items" />
-        <Card.Body>
-          <div style={{ height: '400px' }}>
-            <EChartsBar
-              data={products}
-              xAccessor={(d) => d.name}
-              yAccessor={(d) => d.revenue}
-              seriesName="Revenue"
-              colorBy="data"
-              showGrid={true}
-              yAxisLabel="Revenue ($)"
-              tooltipFormatter={(params: any) => {
-                return `${params[0].name}<br/>Revenue: $${params[0].value.toLocaleString()}`;
-              }}
-            />
-          </div>
-        </Card.Body>
-      </Card>
-    </Wrapper>
-  );
-};
-
-export const MonochromeBar: StoryFn<EChartsBarProps<CategoryData>> = (args) => {
-  const data = generateCategoryData(12);
-
-  return (
-    <Wrapper>
-      <EChartsBar<CategoryData>
-        {...args}
-        data={data}
-        xAccessor={(d) => d.name}
-        yAccessor={(d) => d.value}
-        seriesName="Activity"
-        colorBy="series"
-        title="Player Activity by Hour"
-        barWidth="60%"
-      />
-    </Wrapper>
-  );
-};

package/src/components/charts/echarts/EChartsBar.tsx

@@ -1,133 +0,0 @@
-import { FC, useMemo } from 'react';
-import { EChartsOption } from 'echarts';
-import { ResponsiveECharts, EChartsBaseProps } from './EChartsBase';
-
-export interface EChartsBarProps<T = any> extends Omit<EChartsBaseProps, 'option'> {
-  data: T[];
-  xAccessor: (d: T) => string | number;
-  yAccessor: (d: T) => number;
-  seriesName?: string;
-  horizontal?: boolean;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  xAxisLabel?: string;
-  yAxisLabel?: string;
-  title?: string;
-  subtitle?: string;
-  barWidth?: string | number;
-  barGap?: string;
-  tooltipFormatter?: (params: any) => string;
-  colorBy?: 'series' | 'data';
-}
-
-export const EChartsBar: FC<EChartsBarProps> = ({
-  data,
-  xAccessor,
-  yAccessor,
-  seriesName = 'Value',
-  horizontal = false,
-  showGrid = true,
-  showLegend = false,
-  xAxisLabel,
-  yAxisLabel,
-  title,
-  subtitle,
-  barWidth,
-  barGap = '30%',
-  tooltipFormatter,
-  colorBy = 'series',
-  ...chartProps
-}) => {
-  const option: EChartsOption = useMemo(() => {
-    const categories = data.map(xAccessor);
-    const values = data.map(yAccessor);
-
-    const xAxisConfig = {
-      type: horizontal ? 'value' : 'category',
-      data: horizontal ? undefined : categories,
-      name: xAxisLabel,
-      nameLocation: 'middle',
-      nameGap: 30,
-    };
-
-    const yAxisConfig = {
-      type: horizontal ? 'category' : 'value',
-      data: horizontal ? categories : undefined,
-      name: yAxisLabel,
-      nameLocation: 'middle',
-      nameGap: 50,
-    };
-
-    return {
-      title: title
-        ? {
-            text: title,
-            subtext: subtitle,
-            left: 'center',
-          }
-        : undefined,
-      legend: showLegend
-        ? {
-            data: [seriesName],
-            top: 30,
-          }
-        : undefined,
-      grid: showGrid
-        ? {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          }
-        : undefined,
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-        },
-        formatter: tooltipFormatter,
-      },
-      xAxis: xAxisConfig as any,
-      yAxis: yAxisConfig as any,
-      series: [
-        {
-          name: seriesName,
-          type: 'bar',
-          data: values,
-          barWidth: barWidth,
-          barGap: barGap,
-          itemStyle:
-            colorBy === 'data'
-              ? {
-                  color: (params: any) => {
-                    const colors = ['#664de5', '#3ccd6A', '#f57c00', '#ff4252', '#06b6d4'];
-                    return colors[params.dataIndex % colors.length];
-                  },
-                }
-              : undefined,
-          emphasis: {
-            focus: 'series',
-          },
-        },
-      ],
-    };
-  }, [
-    data,
-    xAccessor,
-    yAccessor,
-    seriesName,
-    horizontal,
-    showGrid,
-    showLegend,
-    xAxisLabel,
-    yAxisLabel,
-    title,
-    subtitle,
-    barWidth,
-    barGap,
-    tooltipFormatter,
-    colorBy,
-  ]);
-
-  return <ResponsiveECharts option={option} {...chartProps} />;
-};