.prettierrc.json

@@ -2,9 +2,10 @@
   "plugins": ["@ianvs/prettier-plugin-sort-imports"],
   "importOrder": ["<BUILTIN_MODULES>", "^react$", "<THIRD_PARTY_MODULES>", "^[.]"],
   "importOrderParserPlugins": ["typescript", "jsx", "importAttributes"],
-  "importOrderTypeScriptVersion": "5.5.0",
+  "importOrderTypeScriptVersion": "5.7.0",
   "arrowParens": "avoid",
   "printWidth": 100,
   "proseWrap": "always",
-  "singleQuote": true
+  "singleQuote": true,
+  "semi": false
 }

README.md

@@ -19,9 +19,9 @@ npm install react-github-calendar
 ## Usage
 
 ```tsx
-import GitHubCalendar from 'react-github-calendar';
+import GitHubCalendar from 'react-github-calendar'
 
-<GitHubCalendar username="grubersjoe" />;
+;<GitHubCalendar username="grubersjoe" />
 ```
 
 ## FAQ

eslint.config.mjs

@@ -1,12 +1,12 @@
 // @ts-check
-import { fixupPluginRules } from '@eslint/compat';
-import eslint from '@eslint/js';
+import { fixupPluginRules } from '@eslint/compat'
+import eslint from '@eslint/js'
 // @ts-ignore
-import reactHooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks'
 // @ts-ignore
-import react from 'eslint-plugin-react/configs/recommended.js';
-import globals from 'globals';
-import typescript from 'typescript-eslint';
+import react from 'eslint-plugin-react/configs/recommended.js'
+import globals from 'globals'
+import typescript from 'typescript-eslint'
 
 export default typescript.config(
   eslint.configs.recommended,
@@ -59,4 +59,4 @@ export default typescript.config(
       ...reactHooks.configs.recommended.rules,
     },
   },
-);
+)

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-github-calendar-example",
   "homepage": "https://grubersjoe.github.io/react-github-calendar/",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "license": "MIT",
   "private": true,
   "scripts": {

example/src/components/CodeBlock.tsx

@@ -1,9 +1,9 @@
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { tomorrow as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { tomorrow as theme } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 type Props = {
-  children: string;
-};
+  children: string
+}
 
 const CodeBlock = ({ children }: Props) => (
   <SyntaxHighlighter
@@ -21,6 +21,6 @@ const CodeBlock = ({ children }: Props) => (
   >
     {children}
   </SyntaxHighlighter>
-);
+)
 
-export default CodeBlock;
+export default CodeBlock

example/src/components/Docs.tsx

@@ -1,37 +1,37 @@
-import { useEffect, useState, type FormEventHandler } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import GitHubButton from 'react-github-btn';
-import GitHubCalendar, { type Props } from 'react-github-calendar';
-import { useSearchParams } from 'react-router';
-import pkg from '../../package.json';
-import CodeBlock from './CodeBlock';
-import { errorRenderer } from './Error';
-import '../styles.scss';
-import ForkMe from './ForkMe';
+import { useEffect, useState, type FormEventHandler } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import GitHubButton from 'react-github-btn'
+import GitHubCalendar, { type Props } from 'react-github-calendar'
+import { useSearchParams } from 'react-router'
+import pkg from '../../package.json'
+import CodeBlock from './CodeBlock'
+import { errorRenderer } from './Error'
+import '../styles.scss'
+import ForkMe from './ForkMe'
 
-const defaultUsername = 'grubersjoe';
+const defaultUsername = 'grubersjoe'
 
 const Docs = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const initialUsername = searchParams.get('user') ?? defaultUsername;
+  const [searchParams, setSearchParams] = useSearchParams()
+  const initialUsername = searchParams.get('user') ?? defaultUsername
 
-  const [username, setUsername] = useState(initialUsername);
-  const [input, setInput] = useState(initialUsername);
+  const [username, setUsername] = useState(initialUsername)
+  const [input, setInput] = useState(initialUsername)
 
   useEffect(() => {
     if (initialUsername !== username) {
-      setUsername(initialUsername);
-      setInput(initialUsername);
+      setUsername(initialUsername)
+      setInput(initialUsername)
     }
-  }, [initialUsername, username]);
+  }, [initialUsername, username])
 
   const onUsernameSubmit: FormEventHandler = event => {
-    event.preventDefault();
-    const val = input.trim();
+    event.preventDefault()
+    const val = input.trim()
     if (val && val !== username) {
-      setSearchParams({ user: val.toLowerCase() });
+      setSearchParams({ user: val.toLowerCase() })
     }
-  };
+  }
 
   return (
     <div>
@@ -46,7 +46,7 @@ const Docs = () => {
               placeholder="Enter your GitHub username"
               value={input}
               onChange={event => {
-                setInput(event.target.value);
+                setInput(event.target.value)
               }}
               autoComplete="on"
               required
@@ -497,32 +497,32 @@ function transformData(data: Array<Activity>): Array<Activity>;`}
         <p style={{ marginTop: '3rem' }}>
           <button
             onClick={() => {
-              window.scroll({ top: 0, behavior: 'smooth' });
+              window.scroll({ top: 0, behavior: 'smooth' })
             }}
           >
             Back to top
           </button>
         </p>
       </main>
     </div>
-  );
-};
+  )
+}
 
 const selectLastHalfYear: Props['transformData'] = contributions => {
-  const currentYear = new Date().getFullYear();
-  const currentMonth = new Date().getMonth();
-  const shownMonths = 6;
+  const currentYear = new Date().getFullYear()
+  const currentMonth = new Date().getMonth()
+  const shownMonths = 6
 
   return contributions.filter(activity => {
-    const date = new Date(activity.date);
-    const monthOfDay = date.getMonth();
+    const date = new Date(activity.date)
+    const monthOfDay = date.getMonth()
 
     return (
       date.getFullYear() === currentYear &&
       monthOfDay > currentMonth - shownMonths &&
       monthOfDay <= currentMonth
-    );
-  });
-};
+    )
+  })
+}
 
-export default Docs;
+export default Docs

example/src/components/Error.tsx

@@ -1,4 +1,4 @@
-import type { FallbackProps } from 'react-error-boundary';
+import type { FallbackProps } from 'react-error-boundary'
 
 export const errorRenderer = ({ error }: FallbackProps) => (
   <div className="error">
@@ -10,4 +10,4 @@ export const errorRenderer = ({ error }: FallbackProps) => (
       </>
     ) : null}
   </div>
-);
+)

example/src/components/ForkMe.tsx

@@ -1,12 +1,12 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties } from 'react'
 
 const style: CSSProperties = {
   position: 'absolute',
   top: 0,
   right: 0,
   border: 0,
   fill: 'currentcolor',
-};
+}
 
 const ForkMe = () => (
   <a
@@ -27,6 +27,6 @@ const ForkMe = () => (
       />
     </svg>
   </a>
-);
+)
 
-export default ForkMe;
+export default ForkMe

example/src/index.tsx

@@ -1,26 +1,26 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { createHashRouter } from 'react-router';
-import { RouterProvider } from 'react-router/dom';
-import Docs from './components/Docs';
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { createHashRouter } from 'react-router'
+import { RouterProvider } from 'react-router/dom'
+import Docs from './components/Docs'
 
-const container = document.getElementById('root');
+const container = document.getElementById('root')
 
 if (!container) {
-  throw Error('#root not found');
+  throw Error('#root not found')
 }
 
-const root = createRoot(container);
+const root = createRoot(container)
 
 const router = createHashRouter([
   {
     path: '/*',
     element: <Docs />,
   },
-]);
+])
 
 root.render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>,
-);
+)

example/sync-version.js

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 
 /* eslint-disable */
-const fs = require('fs');
-const path = require('path');
+const fs = require('fs')
+const path = require('path')
 
-const parentPkgFile = String(fs.readFileSync(path.join(__dirname, '../package.json')));
-const parentPkg = JSON.parse(parentPkgFile);
+const parentPkgFile = String(fs.readFileSync(path.join(__dirname, '../package.json')))
+const parentPkg = JSON.parse(parentPkgFile)
 
-const pkgFile = String(fs.readFileSync(path.join(__dirname, './package.json')));
-const pkg = JSON.parse(pkgFile);
+const pkgFile = String(fs.readFileSync(path.join(__dirname, './package.json')))
+const pkg = JSON.parse(pkgFile)
 
-pkg.version = parentPkg.version;
+pkg.version = parentPkg.version
 
-fs.writeFileSync(path.join(__dirname, './package.json'), JSON.stringify(pkg, null, 2) + '\n');
+fs.writeFileSync(path.join(__dirname, './package.json'), JSON.stringify(pkg, null, 2) + '\n')

example/vite.config.mts

@@ -1,5 +1,5 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],
@@ -17,4 +17,4 @@ export default defineConfig({
       include: [/react-github-calendar/],
     },
   },
-});
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-github-calendar",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "description": " React component to display a GitHub contributions calendar",
   "author": "Jonathan Gruber <gruberjonathan@gmail.com>",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "prepublishOnly": "pnpm check && pnpm build"
   },
   "dependencies": {
-    "react-activity-calendar": "^2.7.6",
+    "react-activity-calendar": "^2.7.7",
     "react-error-boundary": "^5.0.0"
   },
   "devDependencies": {
@@ -38,7 +38,7 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.6",
     "@types/react": "^19.0.2",
     "@types/tinycolor2": "^1.4.6",
     "dts-bundle-generator": "^9.5.1",
@@ -48,7 +48,7 @@
     "gh-pages": "^6.3.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.0",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "rollup": "^4.29.1",