[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

[FEATURE]: Converts the package to typescript. - #127

Open
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion
Open

[FEATURE]: Converts the package to typescript. #127
pravton wants to merge 14 commits into
mainfrom
feature/typescript-conversion

Conversation

@pravton

Copy link
Copy Markdown
Contributor

Task: https://wethecollective.teamwork.com/app/tasks/25795363

Description.

Converts the package to TypeScript.

Additional notes

  • Andrew suggested trying the beta version, so pre.json is included with the changeset.
  • Updated the configs and packages.
  • Functionality is unchanged, and nothing should be breaking with this update.
  • Updated all components and the classnames util with types.
  • Updated the documentation with both JS and TS examples.

CopilotAI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Converts the @wethegit/react-gallery package source and build pipeline to TypeScript, adding type exports and updating docs/examples to support TS consumers while keeping runtime behavior largely the same.

Changes:

  • Migrates library entry points, components, hooks, and utilities from JS/JSX to TS/TSX and adds shared type definitions.
  • Updates Vite build to use a TS entry and generate .d.ts output; adds a strict tsconfig.json.
  • Updates package metadata and README to publish/describe the new TypeScript typings and usage examples.

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file
FileDescription
vite.config.tsAdds vite-plugin-dts and switches lib entry to src/lib/index.ts.
tsconfig.jsonIntroduces strict TS compiler settings for the repo.
src/main.tsxUpdates example app to TS and adjusts React root initialization.
src/lib/utils/classnames.tsReplaces JS utility with typed TS implementation.
src/lib/utils/classnames.jsRemoves old JS classnames implementation.
src/lib/types/types.tsAdds shared exported type definitions for components/hooks.
src/lib/types/css-modules.d.tsAdds TS module declarations for CSS modules.
src/lib/index.tsAdds typed public exports (components + types).
src/lib/index.jsRemoves old JS index exports.
src/lib/hooks/use-gallery.tsxAdds generic return typing for the useGallery hook.
src/lib/components/gallery-pagination.tsxMigrates pagination component to TS with typed render props.
src/lib/components/gallery-pagination.jsxRemoves old JSX pagination component.
src/lib/components/gallery-pagination-item.tsxMigrates pagination item to TS and adds click arg typing.
src/lib/components/gallery-pagination-item.jsxRemoves old JSX pagination item.
src/lib/components/gallery-nav.tsxMigrates nav component to TS with typed render prop and props.
src/lib/components/gallery-main.tsxMigrates main component to TS with generics and typed pointer events/styles.
src/lib/components/gallery-item.tsxMigrates item component to TS with typed props and style casting.
src/lib/components/gallery-context.tsxMigrates context/provider to TS with typed context value + props.
README.mdAdds JS + TS usage examples and updates type references in docs.
package.jsonAdds types export and introduces TS-related dev tooling/scripts.
package-lock.jsonUpdates lockfile for new TS/dts/eslint dependencies and versioning.
.eslintrcAdds TypeScript ESLint configuration.
.changeset/six-nails-tease.mdAdds changeset for the TypeScript conversion + docs updates.
.changeset/pre.jsonEnables Changesets pre-release mode for a beta tag.
Suppressed comments (6)

src/main.tsx:2

  • Root is only used as a type; import it as type-only to avoid relying on tooling to erase it (and to prevent potential runtime named-import issues).
    src/main.tsx:105
  • Typo in comment: "re-intializing" → "re-initializing".
    src/lib/components/gallery-context.tsx:98
  • goToIndex currently treats falsy items (e.g., 0, "", false) as if the index is invalid because it checks !items[index]. Since items is generic (T[]), this should validate index bounds instead of item truthiness.

This issue also appears on line 114 of the same file.
src/lib/components/gallery-context.tsx:116

  • This effect has the same falsy-item issue as goToIndex (!items[activeIndex]). If T can be falsy, this may incorrectly reset the gallery. Prefer an index bounds check.
    README.md:67
  • Spelling/capitalization: "Javascript" should be "JavaScript".
#### Usage: Javascript

README.md:125

  • Spelling/capitalization: "Typescript" should be "TypeScript".
#### Usage: Typescript

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread.eslintrc
Comment on lines 8 to 12
"plugin:react-hooks/recommended",
"prettier"
"prettier",
],
"parser": "@typescript-eslint/parser",
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
Comment threadpackage.json
Comment on lines +70 to 74
"@typescript-eslint/eslint-plugin": "^8.67.0",
"@typescript-eslint/parser": "^8.67.0",
"@vitejs/plugin-react-swc": "^4.3.3",
"eslint": "^8.5.7",
"eslint-config-prettier": "~9.1.0",
>
<Tag
className={buttonClassName}
aria-current={active ? "true" : null}
"@wethegit/react-gallery": minor
---

- Converts the package to typscript.
Comment threadREADME.md
- Accessibility. Built with careful attention to focus management and assistive technology.
- Fully-customizable layouts, using CSS Custom Properties.
- Provides a custom React hook for accessing gallery data, state, updater functions, and more. Build anything on top of the existing gallery components!
- Written in typescript
Comment thread.changeset/pre.json
Comment on lines +4 to +7
"initialVersions": {
"@wethegit/react-gallery": "5.0.0"
},
"changesets": []
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@pravton