[FEATURE]: Converts the package to typescript.

.changeset/pre.json

@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@wethegit/react-gallery": "5.0.1"
+  },
+  "changesets": []
+}

.changeset/six-nails-tease.md

@@ -0,0 +1,6 @@
+---
+"@wethegit/react-gallery": minor
+---
+
+- Converts the package to TypeScript.
+- Updates docs with typescript examples.

.eslintrc

@@ -2,14 +2,16 @@
   "env": { "browser": true, "es2020": true },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
     "prettier"
   ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
   "settings": { "react": { "version": "18.2" }, "jest": { "version": 26 } },
-  "plugins": ["react-refresh"],
+  "plugins": ["react-refresh", "@typescript-eslint"],
   "rules": {
     "react-refresh/only-export-components": "off",
     "react/prop-types": "off"

.prettierrc

@@ -4,5 +4,13 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "printWidth": 90
+  "printWidth": 90,
+  "overrides": [
+    {
+      "files": [".eslintrc", "*.json"],
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
 }

README.md

@@ -22,6 +22,7 @@ A slideshow-style gallery component for use in React projects.
 - 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
 
 ## Getting started
 
@@ -52,7 +53,7 @@ import {
 This is an optional step, but it's highly recommended to use the base styles as a starting point. The most straightforward way to do this is to import the stylesheet into your app directly from the `/node_modules/@wethegit/react-gallery/dist/` directory, but you can do this in whichever way is preferable within your build system or framework.
 
 ```jsx
-// app.js
+// app.js | app.ts
 
 import "@wethegit/react-gallery/style.css"
 ```
@@ -63,6 +64,8 @@ The `<Gallery>` component is a React context provider, which gives all child com
 
 ⚠️ Before continuing, make sure you have properly [imported the base stylesheet](#import-the-base-stylesheet), if you intend to use it.
 
+#### Usage: Javascript
+
 <!-- prettier-ignore -->
 ```js
 // some-data.js
@@ -116,6 +119,70 @@ const YourGallery = () => {
   )
 }
 
+export default YourGallery
+
+```
+#### Usage: Typescript
+
+<!-- prettier-ignore -->
+```ts
+// some-data.ts
+
+interface GalleryItemDataType {
+  image: string
+  alt: string
+  id: number
+}
+
+export const GALLERY_ITEMS : GalleryItemDataType[] = [
+  { image: "/my-image-1.png", alt: "Description of image!", id: 131789 },
+  { image: "/my-image-2.png", alt: "Description of image!", id: 235233 },
+  { image: "/my-image-3.png", alt: "Description of image!", id: 987432 },
+  { image: "/my-image-4.png", alt: "Description of image!", id: 768324 },
+]
+```
+
+<!-- prettier-ignore -->
+```tsx
+// your-gallery.ts
+
+import { GALLERY_ITEMS } from "./some-data"
+import {
+  Gallery,
+  GalleryMain,
+  GalleryNav,
+  GalleryPagination,
+  GalleryPaginationItem,
+  GalleryItem,
+} from "@wethegit/react-gallery"
+
+const YourGallery = () => {
+  return (
+    <Gallery items={GALLERY_ITEMS}>
+
+      <GalleryMain<GalleryItemDataType>
+        renderGalleryItem={({ item, index, active }) => (
+          <GalleryItem key={item.id} index={index} active={active}>
+            <img src={item.image} alt={item.alt} />
+          </GalleryItem>
+        )}
+      />
+
+      <GalleryNav direction={0}>⬅️</GalleryNav>
+      <GalleryNav direction={1}>➡️</GalleryNav>
+
+      <GalleryPagination<GalleryItemDataType>
+        renderPaginationItem={({ item, index, active }) => (
+          <GalleryPaginationItem key={item.id} index={index} active={active}>
+            <span>{index + 1}</span>
+          </GalleryPaginationItem>
+        )}
+      />
+
+    </Gallery>
+  )
+}
+
 export default YourGallery
 ```
 
@@ -153,7 +220,8 @@ Assuming the base stylesheet is being used, the `<GalleryMain>` component render
 
 The parent component for all gallery instances. This serves as a React context provider to its children.
 
-#### Props:
+#### Props: `<GalleryProps>`
+
 
 | Prop         | Type     | Default value    | Description                                                                                                                                                                                                                                                                                                                                                                                            |
 | ------------ | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -174,6 +242,8 @@ Per the WAI-ARIA spec, browsers using assistive technology such as screen reader
 
 The `onChange` callback allows you to run code whenever the active gallery item changes. It receives a single Object as an argument, containing the following properties:
 
+##### Props: `<GalleryChangeCallback>`
+
 | Argument  | Type   | Description                                                |
 | --------- | ------ | ---------------------------------------------------------- |
 | oldIndex  | Number | The index before the onChange function fired.              |
@@ -184,7 +254,7 @@ The `onChange` callback allows you to run code whenever the active gallery item
 
 The primary gallery body. Must be used within a `<Gallery>`. Renders an unordered list (`<ul>`) of your gallery items.
 
-#### Props:
+#### Props: `<GalleryMainProps>`
 
 | Prop              | Type     | Description                                                                                                     |
 | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------- |
@@ -195,6 +265,8 @@ The primary gallery body. Must be used within a `<Gallery>`. Renders an unordere
 
 This render prop expects a `<GalleryItem>` to be returned, and receives a handful of arguments:
 
+#### Props: `<RenderGalleryItemArgs>`
+
 | Argument    | Type    | Description                                                                                                    |
 | ----------- | ------- | -------------------------------------------------------------------------------------------------------------- |
 | active      | Boolean | Whether the current item being iterated over is the active item.                                               |
@@ -205,19 +277,20 @@ This render prop expects a `<GalleryItem>` to be returned, and receives a handfu
 ### &lt;GalleryItem&gt;
 Required component that wraps each child inside the `renderGalleryitem` prop. Renders a list item (`<li>`) and can accept the following props:
 
+#### Props: `<GalleryItemProps>`
+
 | Prop              | Type     | Description                                                                                                     |
 | ----------------- | -------- | --------------------------------------------------------------------------------------------------------------- |
 | children         | JSX   |                                                                                                                 |
 | className         | String   |                                                                                                                 |
 | active | Boolean | Whether the current item being iterated over is the active item. |
 | index | Number | The index of the currently active gallery item. |
 
-
 ### &lt;GalleryNav&gt;
 
 The navigational "next" and "previous" buttons. Must be used within a `<Gallery>`. You can render your buttons either by passing regular JSX children to them, or by using the `renderNavItem` render prop.
 
-#### Props:
+#### Props: `<GalleryNavProps>`
 
 | Prop          | Type     | Description                                                                                                                                                                       |
 | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -230,6 +303,8 @@ The navigational "next" and "previous" buttons. Must be used within a `<Gallery>
 
 This render prop is a nice alternative to simply passing childern to the `<GalleryNav>`, as it provides you with a handful of arguments, as outlined below:
 
+#### Props: `<RenderNavItemArgs>`
+
 | Argument    | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                             |
 | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | activeIndex | Number  | The index of the currently-active gallery item.                                                                                                                                                                                                                                                                                                                                                         |
@@ -239,17 +314,26 @@ This render prop is a nice alternative to simply passing childern to the `<Galle
 
 Renders an unordered list (`<ul>`) of pagination items. Must be used within a `<Gallery>`.
 
-#### Props:
+#### Props: `<GalleryPaginationProps>`
 
 | Prop                 | Type     | Description                                                                                                           |
 | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- |
 | className            | String   |                                                                                                                       |
 | renderPaginationItem | Function | A render prop, returning the JSX to render for each pagination item. [More information](#renderpaginationitem) below. |
 
+##### Type import
+
+```ts
+// your-gallery.ts
+import type { GalleryPaginationProps } from "@wethegit/react-gallery"
+```
+
 #### `renderPaginationItem`
 
 This render prop receives a handful of arguments, and is necessary for rendering pagination UI:
 
+#### Props: `<RenderPaginationItemArgs>`
+
 | Argument    | Type    | Description                                                                                                               |
 | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
 | active      | Boolean | Whether the current pagination item being iterated over corresponds to the active gallery item.                           |
@@ -259,6 +343,7 @@ This render prop receives a handful of arguments, and is necessary for rendering
 
 **Example usage of `renderPaginationItem` render prop**
 ```jsx
+// your-gallery.js
 <GalleryPagination
   renderPaginationItem={({ index, active, activeIndex, item }) => (
     <GalleryPaginationItem index={index} active={active} key={item.id}>
@@ -267,11 +352,28 @@ This render prop receives a handful of arguments, and is necessary for rendering
   )}
 />
 ```
+
+```tsx
+// your-gallery.ts
+interface GalleryItemDataType {
+  image: string
+  alt: string
+  id: number
+}
+
+<GalleryPagination<GalleryItemDataType>
+  renderPaginationItem={({ index, active, activeIndex, item }) => (
+    <GalleryPaginationItem index={index} active={active} key={item.id}>
+      <span>{index + 1}</span>
+    </GalleryPaginationItem>
+  )}
+/>
+```
 ### &lt;GalleryPaginationItem&gt;
 
 Used in the prop `renderPaginationItem` of `<GalleryPagination>`. This component with a return value in a list item (`<li>`) and a `<button>`, and receives a handful of arguments:
 
-#### Props:
+#### Props: `<GalleryPaginationItemProps>`
 
 
 | Prop               | Type     | Description                                                                                                     |
@@ -288,6 +390,8 @@ Used in the prop `renderPaginationItem` of `<GalleryPagination>`. This component
 
 **Example usage of `GalleryPaginationItem`**
 ```jsx
+// your-gallery.js
+
 const handlePaginationItemClick = ({ event, index }) => {
   console.log(event, index)
 }
@@ -306,6 +410,27 @@ const handlePaginationItemClick = ({ event, index }) => {
 />
 ```
 
+```tsx
+// your-gallery.ts
+
+const handlePaginationItemClick = ({ event, index }: GalleryPaginationItemClickArgs) => {
+  console.log(event, index)
+}
+
+<GalleryPagination<GalleryItemDataType>
+  renderPaginationItem={({ index, active, item }) => (
+    <GalleryPaginationItem
+      index={index}
+      active={active}
+      key={item.id}
+      onClick={handlePaginationItemClick}
+    >
+      <span>{index + 1}</span>
+    </GalleryPaginationItem>
+  )}
+/>
+```
+
 ## Accessibility
 
 The gallery component handles tabbing, focus management, and live-region announcements out-of-the-box. All relevant patterns used in this component follow the guidelines for carousels as documented by the [Web Accessibility Initiative](https://www.w3.org/WAI/).
@@ -319,6 +444,8 @@ Regarding the ARIA-live text, check out the section on this gallery's [`ariaLive
 For reduced motion implementations, you can detect the user's preference via the `matchMedia` API, and adjust the CSS custom property, `--duration` on the `.gallery` selector. Check out the example below, which adds a style tag to the gallery, and overrides the `--duration` property based on the preference. You could also do this via a conditional className, if you prefer. An alternative is be to pass this `prefersReducedMotion` value as a prop, which could be helpful if you use the Styled Components library.
 
 ```jsx
+// your-gallery.js
+
 const YourGallery = () => {
   // Get the user's motion preference:
   const prefersReducedMotion = window.matchMedia(
@@ -346,6 +473,36 @@ const YourGallery = () => {
 }
 ```
 
+```tsx
+// your-gallery.ts
+
+const YourGallery = () => {
+  // Get the user's motion preference:
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)"
+  ).matches
+
+  // Create an inline style object
+  const style = {
+    "--duration": prefersReducedMotion ? "0s" : "0.5s",
+  } as CSSProperties
+
+  return (
+    // Pass the style overrides to the <Gallery> component
+    <Gallery items={GALLERY_ITEMS} style={style}>
+      <GalleryMain<GalleryItemDataType>
+        renderGalleryItem={({ item, index, active }) => (
+          <GalleryItem key={item.id} index={index} active={active}>
+            <img src={item.image} alt={item.alt} />
+          </GalleryItem>
+        )}
+      />
+      {/* ...etc */}
+    </Gallery>
+  )
+}
+```
+
 ## useGallery hook
 
 The gallery package exposes a `useGallery` React hook. It returns a single object, the properties of which are outlined below.