@takaro/lib-components 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",

package/src/components/actions/Dropdown/useDropdown.tsx

@@ -11,6 +11,7 @@ import {
   useTypeahead,
   useClick,
   shift,
+  flip,
 } from '@floating-ui/react';
 
 export interface UseDropdownOptions {
@@ -42,7 +43,13 @@ export function useDropdown({
     open,
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate,
-    middleware: [offset({ mainAxis: 10 }), shift()],
+    middleware: [
+      offset({ mainAxis: 10 }),
+      flip({
+        fallbackPlacements: ['top', 'bottom'],
+      }),
+      shift(),
+    ],
   });
 
   const interactions = useInteractions([

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,133 @@
+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} />;
+};