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 <[email protected]>

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>

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"

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>
         )}

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={{

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}

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)}

src/lib/components/gallery-pagination-item.jsx

@@ -1,36 +1,35 @@
-// 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,
   className,
   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}

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 })

src/lib/components/gallery.css → 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 {

vite.config.js

@@ -25,4 +25,9 @@ export default defineConfig({
       },
     },
   },
+  css: {
+    modules: {
+      generateScopedName: "[name]__[local]__[hash:base64:6]",
+    },
+  },
 })