@reactberry/system 2.0.0-beta

package/src/blocks/pagination/Pagination.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import Icon from "../Icon";
+import { Box, Button } from "@/design-system/elements";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+interface PaginationProps {
+  total: number;
+  pageSize?: number;
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({
+  total,
+  pageSize = 10,
+  onPageChange,
+}: PaginationProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentPage = Number(searchParams.get("page") || 1);
+  const isLastPage = currentPage * pageSize >= total;
+  const pageCount = Math.ceil(total / pageSize);
+
+  const createQueryString = useCallback(
+    (page: number | string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("page", page.toString());
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  const handlePageChange = (page: number | string) => {
+    onPageChange(Number(page));
+    router.push(`${pathname}?${createQueryString(page)}`);
+  };
+
+  const getPageNumbers = (): (number | string)[] => {
+    const pageNumbersToShow = 3;
+    const maxPagesBeforeCurrentPage = Math.floor(pageNumbersToShow / 2);
+    const maxPagesAfterCurrentPage = Math.ceil(pageNumbersToShow / 2) - 1;
+    let startPage = 1;
+    let endPage = pageCount;
+
+    if (pageCount <= 1) {
+      return [];
+    }
+
+    if (currentPage <= maxPagesBeforeCurrentPage) {
+      startPage = 1;
+      endPage = pageNumbersToShow;
+    } else if (currentPage + maxPagesAfterCurrentPage >= pageCount) {
+      startPage = pageCount - pageNumbersToShow + 1;
+    } else {
+      startPage = currentPage - maxPagesBeforeCurrentPage;
+      endPage = currentPage + maxPagesAfterCurrentPage;
+    }
+
+    let numbers: number[] = Array.from(Array(endPage + 1 - startPage).keys())
+      .map((num) => startPage + num)
+      .filter((num) => num <= pageCount && num > 0);
+
+    if (numbers[0] > 1) {
+      numbers =
+        numbers[0] <= 2
+          ? [1, ...numbers]
+          : ([1, "...", ...numbers] as number[]);
+    }
+
+    if (numbers[numbers.length - 1] < pageCount) {
+      numbers =
+        numbers[numbers.length - 1] >= pageCount - 1
+          ? [...numbers, pageCount]
+          : ([...numbers, "...", pageCount] as number[]);
+    }
+
+    return numbers;
+  };
+
+  // If total items are less than or equal to pageSize, don't show pagination
+  if (total <= pageSize) {
+    return null;
+  }
+
+  return (
+    <Box as="nav" display="flex" justifyContent="center" alignItems="center">
+      <Box display="flex" gap="xxsmall">
+        <Button
+          variant="outline"
+          $size="icon.xsmall"
+          onClick={() => currentPage !== 1 && handlePageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          aria-label={
+            currentPage === 1 ? "No previous page available" : "Previous page"
+          }
+        >
+          <Icon icon="IconArrowLeft" size="medium" />
+        </Button>
+
+        {getPageNumbers().map((page, index) =>
+          page === "..." ? (
+            <Button
+              key={`ellipsis-${index}`}
+              disabled
+              variant="outline"
+              $size="icon.xsmall"
+            >
+              &hellip;
+            </Button>
+          ) : page === currentPage ? (
+            <Button
+              key={page}
+              $size="icon.xsmall"
+              variant="primary"
+              aria-current="true"
+              // disabled
+            >
+              {page}
+            </Button>
+          ) : (
+            <Button
+              key={page}
+              variant="outline"
+              $size="icon.xsmall"
+              onClick={() => handlePageChange(page)}
+              aria-label={`Page ${page}`}
+            >
+              {page}
+            </Button>
+          ),
+        )}
+
+        <Button
+          variant="outline"
+          $size="icon.xsmall"
+          onClick={() => !isLastPage && handlePageChange(currentPage + 1)}
+          disabled={isLastPage}
+          aria-label={isLastPage ? "No next page available" : "Next page"}
+        >
+          <Icon icon="IconArrowRight" size="medium" />
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/src/blocks/pagination/PaginationList.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Box } from "@/design-system/elements";
+import { Pagination } from "./Pagination";
+
+interface PaginationListProps {
+  total: number; // total number of items
+  pageSize?: number; // items per page (default: 20)
+  children: ReactNode; // the list content to render
+  onPageChange?: (page: number) => void; // optional callback when page changes
+}
+
+export default function PaginationList({
+  total,
+  pageSize = 10,
+  children,
+  onPageChange,
+}: PaginationListProps) {
+  // Simply pass the onPageChange handler to the Pagination component
+  const handlePageChange = (page: number) => {
+    if (onPageChange) {
+      onPageChange(page);
+    }
+  };
+
+  return (
+    <>
+      {/* Render the paginated content */}
+      {children}
+      {/* Render the pagination controls */}
+      <Box position="sticky" bottom="0" bg="base" p="small">
+        <Pagination
+          total={total}
+          pageSize={pageSize}
+          onPageChange={handlePageChange}
+        />
+      </Box>
+    </>
+  );
+}

package/src/blocks/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export { default as PaginationList } from "./PaginationList";

package/src/charts/BarChart.tsx

@@ -0,0 +1,63 @@
+import { ResponsiveBar } from "@nivo/bar";
+import { charttheme } from "./utils";
+// import { useTheme } from "styled-components";
+
+const BarChart = ({
+  data,
+  keys,
+  indexBy,
+  props,
+}: {
+  data: any;
+  props: any;
+  keys: string[];
+  indexBy: string;
+}) => {
+  // const theme = useTheme();
+
+  return (
+    <ResponsiveBar
+      data={data}
+      keys={keys}
+      indexBy={indexBy}
+      {...props}
+      margin={{ top: 50, right: 0, bottom: 100, left: 50 }}
+      padding={0.125}
+      innerPadding={2}
+      borderRadius={4}
+      borderWidth={1}
+      groupMode={"stacked"}
+      borderColor={{ from: "color", modifiers: [["brighter", 0.5]] }}
+      colors={{ scheme: "tableau10" }}
+      axisBottom={{
+        tickRotation: -45,
+        truncateTickAt: 10,
+      }}
+      axisLeft={{
+        legend: "Messages",
+        legendPosition: "middle",
+        legendOffset: -40,
+        tickValues: 3,
+      }}
+      labelSkipWidth={12}
+      labelSkipHeight={12}
+      labelTextColor="white"
+      // legends={[
+      //   {
+      //     dataFrom: "keys",
+      //     anchor: "bottom-right",
+      //     direction: "column",
+      //     translateX: 120,
+      //     itemWidth: 100,
+      //     itemHeight: 20,
+      //     itemsSpacing: 2,
+      //     symbolSize: 20,
+      //   },
+      // ]}
+      animate={true}
+      theme={charttheme}
+    />
+  );
+};
+
+export default BarChart;

package/src/charts/PieChart.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ResponsivePie } from "@nivo/pie";
+import { charttheme } from "./utils";
+
+const PieChart = ({ data, ...props }: { data: any }) => {
+  return (
+    <ResponsivePie
+      data={data}
+      animate
+      sortByValue={false}
+      innerRadius={0.75}
+      padAngle={2}
+      cornerRadius={4}
+      colors={{ datum: "data.color" }}
+      borderWidth={1}
+      borderColor={{ from: "color", modifiers: [["brighter", 0.8]] }}
+      margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
+      arcLinkLabelsSkipAngle={10}
+      arcLinkLabelsTextColor="#ffffff88"
+      arcLinkLabelsThickness={2}
+      arcLinkLabelsColor={{ from: "color", modifiers: [["darker", 2]] }}
+      arcLabelsSkipAngle={10}
+      arcLabelsTextColor={{
+        from: "color",
+        modifiers: [["darker", 2]],
+      }}
+      arcLinkLabel={(d) => `${d.label}`}
+      enableArcLabels={false}
+      arcLinkLabelsOffset={4}
+      arcLinkLabelsDiagonalLength={8}
+      arcLinkLabelsStraightLength={8}
+      arcLinkLabelsTextOffset={4}
+      theme={charttheme}
+      {...props}
+    />
+  );
+};
+
+export default PieChart;

package/src/charts/index.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from "./BarChart";
+export { default as PieChart } from "./PieChart";
+export * from "./utils";

package/src/charts/utils.ts

@@ -0,0 +1,103 @@
+export const charttheme = {
+  background: "transparent",
+  fontFamily: "sans-serif",
+  fontSize: 12,
+  textColor: "#777777",
+  axis: {
+    domain: {
+      line: {
+        stroke: "transparent",
+        strokeWidth: 1,
+      },
+    },
+    ticks: {
+      line: {
+        stroke: "#777777",
+        strokeWidth: 2,
+      },
+      text: {},
+    },
+    legend: {
+      text: {
+        fontSize: 12,
+        fontWeight: 600,
+      },
+    },
+  },
+  grid: {
+    line: {
+      stroke: "#333",
+      strokeWidth: 1,
+      strokeDasharray: "2 2",
+    },
+  },
+  legends: {
+    text: {
+      fill: "#333333",
+      fontSize: 12,
+    },
+  },
+  labels: {
+    text: { fontSize: 11, fill: "currentColor", fontWeight: 600 },
+  },
+  markers: {
+    lineColor: "#ff0000",
+    lineStrokeWidth: 1,
+    lineStrokeDasharray: "4 4",
+  },
+  dots: {
+    text: {},
+  },
+  tooltip: {
+    container: {
+      background: "black",
+      color: "white",
+      fontSize: "inherit",
+      borderRadius: "8px",
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.25)",
+      padding: "5px 9px",
+    },
+    basic: {
+      whiteSpace: "pre",
+      display: "flex",
+      alignItems: "center",
+    },
+    table: {},
+    tableCell: {
+      padding: "3px 5px",
+    },
+  },
+  crosshair: {
+    line: {
+      stroke: "#000000",
+      strokeWidth: 1,
+      strokeOpacity: 0.75,
+      strokeDasharray: "6 6",
+    },
+  },
+  annotations: {
+    text: {
+      fontSize: 13,
+      outlineWidth: 2,
+      outlineColor: "#ffffff",
+    },
+    link: {
+      stroke: "#000000",
+      strokeWidth: 1,
+      outlineWidth: 2,
+      outlineColor: "#ffffff",
+    },
+    outline: {
+      fill: "none",
+      stroke: "#000000",
+      strokeWidth: 2,
+      outlineWidth: 2,
+      outlineColor: "#ffffff",
+    },
+    symbol: {
+      fill: "#000000",
+      outlineWidth: 2,
+      outlineColor: "#ffffff",
+    },
+  },
+};