From 8d99621f3bfd00b5022d86ffb17116b06cf1d0ea Mon Sep 17 00:00:00 2001
From: Andrew Rubin <30575213+andrewrubin@users.noreply.github.com>
Date: Fri, 16 Feb 2024 15:40:54 -0800
Subject: [PATCH] Use CSS modules (#15)

* fix(docs): add GalleryPaginationItem to table of contents [skip-ci]

* refactor: use CSS modules

* 4.0.0

* fix: react dependency version

* fix: root render

* fix: react dependency order

* fix: root dep

---------

Co-authored-by: Marlon Marcello <marlon.marcello@gmail.com>
---
 index.html                                    |  8 ++-----
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 src/lib/components/gallery-context.jsx        | 13 ++++++-----
 src/lib/components/gallery-item.jsx           | 22 +++++++++----------
 src/lib/components/gallery-main.jsx           |  8 +++----
 src/lib/components/gallery-nav.jsx            | 10 ++++-----
 .../components/gallery-pagination-item.jsx    | 17 +++++++-------
 src/lib/components/gallery-pagination.jsx     |  8 +++----
 .../{gallery.css => gallery.module.css}       |  5 ++---
 vite.config.js                                |  5 +++++
 11 files changed, 47 insertions(+), 55 deletions(-)
 rename src/lib/components/{gallery.css => gallery.module.css} (94%)

diff --git a/index.html b/index.html
index aad61cd..fe122a6 100644
--- a/index.html
+++ b/index.html
@@ -7,15 +7,11 @@
     <title>@wethegit/react-gallery</title>
     <style>
       body {
-        overscroll-behavior: none;
-      }
-
-      .gallery {
-        overflow: hidden;
+        overflow-x: hidden;
       }
 
       img {
-        max-width: 100%;
+        inline-size: 100%;
       }
     </style>
   </head>
diff --git a/package-lock.json b/package-lock.json
index 19390c3..087de5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@wethegit/react-gallery",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@wethegit/react-gallery",
-      "version": "3.0.4",
+      "version": "4.0.0",
       "license": "MIT",
       "dependencies": {
         "prop-types": "~15.8.1"
diff --git a/package.json b/package.json
index 4e562da..40ecf99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/react-gallery",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "description": "A customizable, accessible gallery component for React projects.",
   "files": [
     "dist"
diff --git a/src/lib/components/gallery-context.jsx b/src/lib/components/gallery-context.jsx
index d446bfb..7dc00c6 100644
--- a/src/lib/components/gallery-context.jsx
+++ b/src/lib/components/gallery-context.jsx
@@ -1,12 +1,9 @@
-// packages
 import PropTypes from "prop-types"
 import { createContext, useCallback, useRef, useState, useEffect } from "react"
 
-// utils
 import classnames from "../utils/classnames"
 
-// styles
-import "./gallery.css"
+import styles from "./gallery.module.css"
 
 export const GalleryContext = createContext()
 
@@ -118,13 +115,17 @@ export const Gallery = ({
   return (
     <GalleryContext.Provider value={value}>
       <div
-        className={classnames(["gallery", draggable && "gallery--draggable", className])}
+        className={classnames([
+          styles.gallery,
+          draggable && styles["gallery--draggable"],
+          className,
+        ])}
         style={{ "--touch-offset": touchState.xOffset }}
       >
         {children}
 
         {ariaLiveText && (
-          <p aria-live="polite" className="gallery-util-visually-hidden">
+          <p aria-live="polite" className={styles["visually-hidden"]}>
             {ariaLiveText.replace("$i", activeIndex + 1).replace("$t", items.length)}
           </p>
         )}
diff --git a/src/lib/components/gallery-item.jsx b/src/lib/components/gallery-item.jsx
index c71e503..7237712 100644
--- a/src/lib/components/gallery-item.jsx
+++ b/src/lib/components/gallery-item.jsx
@@ -1,12 +1,10 @@
-// packages
 import PropTypes from "prop-types"
 
-// hooks
 import { useGallery } from "../hooks/use-gallery"
-
-// utils
 import classnames from "../utils/classnames"
 
+import styles from "./gallery.module.css"
+
 export const GalleryItem = ({ index, active, className, children, ...props }) => {
   const {
     itemNodes,
@@ -28,15 +26,15 @@ export const GalleryItem = ({ index, active, className, children, ...props }) =>
       {...a11yProps}
       {...props}
       className={classnames([
-        "gallery__item",
-        draggable && "gallery__item--draggable",
-        draggable && touchState.offsetting && "gallery__item--dragging",
-        active && "gallery__item--active",
-        index === previouslyActiveIndex && "gallery__item--was-active",
-        index < activeIndex && "gallery__item--left",
-        index > activeIndex && "gallery__item--right",
+        styles.gallery__item,
+        draggable && styles["gallery__item--draggable"],
+        draggable && touchState.offsetting && styles["gallery__item--dragging"],
+        active && styles["gallery__item--active"],
+        index === previouslyActiveIndex && styles["gallery__item--was-active"],
+        index < activeIndex && styles["gallery__item--left"],
+        index > activeIndex && styles["gallery__item--right"],
         (visibleRange === -1 || Math.abs(index - activeIndex) <= visibleRange) &&
-          "gallery__item--visible",
+          styles["gallery__item--visible"],
         className,
       ])}
       style={{
diff --git a/src/lib/components/gallery-main.jsx b/src/lib/components/gallery-main.jsx
index 123bd49..52be78f 100644
--- a/src/lib/components/gallery-main.jsx
+++ b/src/lib/components/gallery-main.jsx
@@ -1,13 +1,11 @@
-// packages
 import PropTypes from "prop-types"
 import { useCallback } from "react"
 
-// hooks
 import { useGallery } from "../hooks/use-gallery"
-
-// utils
 import classnames from "../utils/classnames"
 
+import styles from "./gallery.module.css"
+
 export const GalleryMain = ({ renderGalleryItem, className, ...props }) => {
   const {
     activeIndex,
@@ -122,7 +120,7 @@ export const GalleryMain = ({ renderGalleryItem, className, ...props }) => {
 
   return (
     <ul
-      className={classnames(["gallery__main", className])}
+      className={classnames([styles.gallery__main, className])}
       onPointerDown={draggable ? handlePointerDown : null}
       onPointerMove={draggable ? handlePointerMove : null}
       onPointerUp={draggable ? handlePointerUp : null}
diff --git a/src/lib/components/gallery-nav.jsx b/src/lib/components/gallery-nav.jsx
index 8c6ab92..e3b608a 100644
--- a/src/lib/components/gallery-nav.jsx
+++ b/src/lib/components/gallery-nav.jsx
@@ -1,12 +1,10 @@
-// packages
 import PropTypes from "prop-types"
 
-// hooks
 import { useGallery } from "../hooks/use-gallery"
-
-// utils
 import classnames from "../utils/classnames"
 
+import styles from "./gallery.module.css"
+
 export const GalleryNav = ({
   direction,
   renderNavItem,
@@ -38,9 +36,9 @@ export const GalleryNav = ({
   return (
     <button
       className={classnames([
+        styles.gallery__nav,
+        styles[`gallery__nav--${direction ? "next" : "previous"}`],
         className,
-        "gallery__nav",
-        `gallery__nav--${direction ? "next" : "previous"}`,
       ])}
       onClick={handleClick}
       {...(!loop && disabledProps)}
diff --git a/src/lib/components/gallery-pagination-item.jsx b/src/lib/components/gallery-pagination-item.jsx
index 7f361ca..281ba22 100644
--- a/src/lib/components/gallery-pagination-item.jsx
+++ b/src/lib/components/gallery-pagination-item.jsx
@@ -1,12 +1,10 @@
-// packages
 import PropTypes from "prop-types"
 
-// hooks
 import { useGallery } from "../hooks/use-gallery"
-
-// utils
 import classnames from "../utils/classnames"
 
+import styles from "./gallery.module.css"
+
 export const GalleryPaginationItem = ({
   index,
   active,
@@ -14,23 +12,24 @@ export const GalleryPaginationItem = ({
   buttonClassName,
   buttonProps,
   children,
-  onClick,
   ...props
 }) => {
   const { goToIndex, itemNodes } = useGallery()
 
-  const handleClick = (i) => (event) => {
+  const handleClick = (i) => {
     goToIndex(i)
     itemNodes.current[i].focus({ preventScroll: true })
-    onClick?.({ event, index })
   }
 
   return (
-    <li className={classnames(["gallery__pagination-item", className])} {...props}>
+    <li
+      className={classnames([styles["gallery__pagination-item"], className])}
+      {...props}
+    >
       <button
         className={buttonClassName}
-        onClick={handleClick(index)}
         aria-current={active ? "true" : null}
+        onClick={() => handleClick(index)}
         {...buttonProps}
       >
         {children}
diff --git a/src/lib/components/gallery-pagination.jsx b/src/lib/components/gallery-pagination.jsx
index 7f9f76d..e44a681 100644
--- a/src/lib/components/gallery-pagination.jsx
+++ b/src/lib/components/gallery-pagination.jsx
@@ -1,12 +1,10 @@
-// packages
 import PropTypes from "prop-types"
 
-// hooks
 import { useGallery } from "../hooks/use-gallery"
-
-// utils
 import classnames from "../utils/classnames"
 
+import styles from "./gallery.module.css"
+
 /***
  *
  * Pagination Item component callback
@@ -37,7 +35,7 @@ export const GalleryPagination = ({ renderPaginationItem, className, ...props })
   const { activeIndex, galleryItems } = useGallery()
 
   return (
-    <ul className={classnames(["gallery__pagination", className])} {...props}>
+    <ul className={classnames([styles.gallery__pagination, className])} {...props}>
       {galleryItems.map((item, index) => {
         const active = activeIndex === index
         return renderPaginationItem({ index, active, activeIndex, item })
diff --git a/src/lib/components/gallery.css b/src/lib/components/gallery.module.css
similarity index 94%
rename from src/lib/components/gallery.css
rename to src/lib/components/gallery.module.css
index 9458597..561ade8 100644
--- a/src/lib/components/gallery.css
+++ b/src/lib/components/gallery.module.css
@@ -1,4 +1,4 @@
-.gallery-util-visually-hidden {
+.visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -36,14 +36,12 @@
 }
 
 .gallery__item {
-  /* stylelint-disable */
   --x: calc(
     (var(--touch-offset, 0) * 1px) + var(--position-offset) +
       (var(--active-gap) * var(--side)) + (var(--item-width) + var(--gap)) *
       (var(--i) - var(--selected))
   );
   --delay: calc(0s * var(--center-offset, 0));
-  /* stylelint-enable */
 
   grid-area: item;
   margin: 0 auto;
@@ -56,6 +54,7 @@
 
 .gallery__item--draggable img {
   pointer-events: none;
+  user-select: none;
 }
 
 .gallery__item--dragging {
diff --git a/vite.config.js b/vite.config.js
index 8064825..ce15f10 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,4 +25,9 @@ export default defineConfig({
       },
     },
   },
+  css: {
+    modules: {
+      generateScopedName: "[name]__[local]__[hash:base64:6]",
+    },
+  },
 })