Reduce bundle size of this package, fix CI

.eslintrc.js

@@ -26,7 +26,14 @@ module.exports = {
     "testing-library",
     "css-modules",
   ],
+  ignorePatterns: [
+    "src/stories/**",
+    "src/**/*.test.ts",
+    "src/helpers/sampleCommits.ts",
+  ],
   rules: {
+    "@typescript-eslint/lines-between-class-members": "off",
+    "@typescript-eslint/no-throw-literal": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
@@ -41,7 +48,12 @@ module.exports = {
         classes: false,
       },
     ],
+    "css-modules/no-unused-class": "off",
+    "import/extensions": "off",
     "import/prefer-default-export": "off",
+    "no-nested-ternary": "off",
+    "no-param-reassign": ["error", { props: false }],
+    "no-plusplus": "off",
     "no-use-before-define": [
       "error",
       {

.github/workflows/github-ci.yml

@@ -2,21 +2,17 @@ name: Run CI on commit-graph
 on:
   pull_request:
     paths:
-      - "/"
+      - "**"
   workflow_dispatch:
 
 jobs:
   ci:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "18"
-      - name: Run the "npm ci" command
-        run: npm ci
-      - name: Run the "npm run build" command
-        run: npm run build
-      - name: Run the "npm test" command
-        run: npm test
+          node-version: "22"
+      - name: Install and CI
+        run: yarn && yarn ci

.storybook/main.ts

@@ -1,8 +1,9 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-webpack5-compiler-swc"],
   framework: {
-    name: "@storybook/nextjs",
+    name: "@storybook/react-webpack5",
     options: {},
   },
   docs: {

README.md

@@ -29,7 +29,7 @@ npm install commit-graph
 
 ## Quick Start
 
-### UBasic Usage (without infinite scroll):
+### Basic Usage (without infinite scroll):
 
 For a basic implementation without infinite scroll:
 

package.json

@@ -21,16 +21,14 @@
     "react"
   ],
   "scripts": {
-    "dev": "next dev",
+    "dev": "storybook dev -p 6006",
     "build": "rollup -c --bundleConfigAsCjs",
-    "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest",
-    "yalc:publish": "npm run build && yalc publish",
-    "yalc:push": "npm run build && yalc push",
-    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\"",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css}\"",
+    "prettier-fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\"",
     "ci": "npm-run-all prettier lint test build",
     "deploy-storybook": "gh-pages -d storybook-static"
   },
@@ -46,14 +44,9 @@
     ]
   },
   "dependencies": {
-    "@dolthub/react-components": "^0.2.7",
-    "@dolthub/react-hooks": "^0.1.7",
-    "@dolthub/web-utils": "^0.1.5",
-    "@rollup/plugin-typescript": "12.3.0",
     "classnames": "^2.3.2",
     "react": ">=18.0.0",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": ">=18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^5.3.0",
     "react-infinite-scroller": "^1.2.6",
     "react-tooltip": "^5.26.3",
@@ -63,18 +56,26 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/nextjs": "^8.0.0",
+    "@rollup/plugin-typescript": "12.3.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
     "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.2.57",
     "@types/react-infinite-scroller": "^1.2.5",
     "@typescript-eslint/eslint-plugin": "8.32.1",
     "@typescript-eslint/parser": "8.53.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "latest",
     "eslint-config-airbnb-typescript": "latest",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-css-modules": "^2.12.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.15.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-testing-library": "^7.16.0",
     "gh-pages": "^6.1.1",
     "jest": "^30.2.0",
-    "next": "^15.1.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "rollup": "^4.12.0",
@@ -83,8 +84,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "8.6.15",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.4.2",
-    "yalc": "^1.0.0-pre.53"
+    "typescript": "^5.4.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

src/components/BranchLabel/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactPopup from "reactjs-popup";
+import cx from "classnames";
 import css from "./index.module.css";
 import { Branch } from "../../types";
-import cx from "classnames";
 
 type ItemProps = {
   branchName: string;
@@ -45,8 +45,8 @@ export default function BranchLabel({
   const current =
     branches.find(b => b.name === currentBranch) ||
     branches[branches.length - 1];
-  branches = branches.filter(b => b.name !== current.name);
-  const len = branches.length;
+  const otherBranches = branches.filter(b => b.name !== current.name);
+  const len = otherBranches.length;
 
   return (
     <div className={css.branches}>
@@ -74,7 +74,7 @@ export default function BranchLabel({
           arrow={false}
         >
           <div className={css.dropdown}>
-            {branches.map(b => (
+            {otherBranches.map(b => (
               <Item
                 branchName={b.name}
                 branchColor={branchColor}

src/components/Branches/BranchPath.tsx

@@ -1,5 +1,5 @@
-import { convertColorToMatrixVariant } from "../../helpers/utils";
 import React from "react";
+import { convertColorToMatrixVariant } from "../../helpers/utils";
 
 type Props = {
   start: number;

src/components/Branches/index.tsx

@@ -26,8 +26,8 @@ export default function Branches({
 
   return (
     <>
-      {columns.map((column, i) => {
-        return column.map(c => {
+      {columns.map((column, i) =>
+        column.map(c => {
           const end = c.end === Infinity ? currentLastCommits : c.end;
           return (
             <BranchPath
@@ -43,8 +43,8 @@ export default function Branches({
               nodeRadius={nodeRadius}
             />
           );
-        });
-      })}
+        }),
+      )}
     </>
   );
 }

src/components/CommitDetails/index.module.css

@@ -55,6 +55,6 @@
   cursor: pointer;
 }
 
-.clickable{
+.clickable {
   cursor: pointer;
-}
+}

src/components/CommitDetails/index.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from "react";
+import { Tooltip } from "react-tooltip";
+import { fromCommitNodeToCommit } from "../../helpers/utils";
 import { Branch, CommitNode, Diff } from "../../types";
 import BranchLabel from "../BranchLabel";
-import { excerpt } from "@dolthub/web-utils";
+import { excerpt } from "../../helpers/inlineUtils";
 import css from "./index.module.css";
-import { Tooltip } from "react-tooltip";
 import DiffSection from "../DiffSection";
-import { useOnClickOutside } from "@dolthub/react-hooks";
-import { fromCommitNodeToCommit } from "src/helpers/utils";
+import { useOnClickOutside } from "../../helpers/useOnClickOutside";
 
 type Props = {
   commit: CommitNode;
@@ -17,7 +17,6 @@ type Props = {
   dateFormatFn?: (d: string | number | Date) => string;
   currentBranch?: string;
   fullSha?: boolean;
-  clicked?: boolean;
   getDiff?: (base: string, head: string) => Promise<Diff | undefined>;
   forDolt?: boolean;
 };
@@ -40,7 +39,7 @@ export default function CommitDetails({
     ? dateFormatFn(commit.commitDate)
     : commit.commitDate.toLocaleDateString();
   const hashBr = commit.hash.slice(0, 7);
-  const committer = commit.committer;
+  const { committer } = commit;
   const message = commit.message || "";
   const commitHashAuthorDate = `${fullSha ? commit.hash : hashBr} - ${committer} - ${date}`;
   const [color, setColor] = useState(commit.commitColor);
@@ -59,18 +58,20 @@ export default function CommitDetails({
       <div
         className={css.container}
         onMouseOver={() => {
-          mouseOver(), setShowDiffButton(true);
+          mouseOver();
+          setShowDiffButton(true);
         }}
         onMouseLeave={() => {
-          mouseLeave(), setShowDiffButton(false);
+          mouseLeave();
+          setShowDiffButton(false);
         }}
         onClick={onClick}
       >
         <div style={{ color: commit.commitColor }} className={css.labelAndLink}>
           <div>
             {commit.onCommitNavigate ? (
               <span
-                style={{ color: color }}
+                style={{ color }}
                 className={`${css.bold} ${css.clickable}`}
                 onClick={() => {
                   commit.onCommitNavigate!();
@@ -82,7 +83,7 @@ export default function CommitDetails({
               </span>
             ) : commit.commitLink ? (
               <a
-                style={{ color: color }}
+                style={{ color }}
                 href={commit.commitLink as string}
                 className={css.bold}
                 onMouseOver={() => setColor("#1f6dc6")}

src/components/CommitGraph/WithInfiniteScroll.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import InfiniteScroll from "react-infinite-scroller";
 import CommitGraph from ".";
 import { Branch, Commit, CommitNode, Diff, GraphStyle } from "../../types";
-import InfiniteScroll from "react-infinite-scroller";
 import css from "./index.module.css";
 
 type Props = {
@@ -24,7 +24,7 @@ export default function WithInfiniteScroll(props: Props) {
       <InfiniteScroll
         loadMore={props.loadMore}
         hasMore={props.hasMore}
-        useWindow={props.parentID ? false : true}
+        useWindow={!props.parentID}
         initialLoad={false}
         loader={
           <div className={css.loader} key={0}>