Merge branch 'main' into feature/type-int-range

Signed-off-by: Marlon Ugocioni Marcello <[email protected]>

packages/wethegit-components-cli/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @wethegit/components-cli
 
+## 3.0.8
+
+### Patch Changes
+
+- Updated dependencies [d9b8ddd]
+  - @wethegit/components@2.3.10
+
 ## 3.0.7
 
 ### Patch Changes

packages/wethegit-components-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/components-cli",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "type": "module",
   "license": "MIT",
   "exports": "./dist/index.js",
@@ -46,6 +46,6 @@
     "ts-morph": "^22.0.0"
   },
   "peerDependencies": {
-    "@wethegit/components": "2.3.9"
+    "@wethegit/components": "2.3.10"
   }
 }

packages/wethegit-components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @wethegit/components
 
+## 2.3.10
+
+### Patch Changes
+
+- d9b8ddd: fix: updates inView to latest version
+
 ## 2.3.9
 
 ### Patch Changes

packages/wethegit-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/components",
-  "version": "2.3.9",
+  "version": "2.3.10",
   "main": "./src/index.ts",
   "sideEffects": false,
   "license": "MIT",
@@ -29,7 +29,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@wethegit/react-hooks": "^2.0.0",
+    "@wethegit/react-hooks": "^3.0.1",
     "@wethegit/react-modal": "^2.0.0",
     "react": "17 - 18",
     "react-dom": "17 - 18",
@@ -56,7 +56,7 @@
     "@storybook/addon-themes": "^8.1.5",
     "@storybook/manager-api": "^8.1.5",
     "@storybook/theming": "^8.1.5",
-    "@wethegit/react-hooks": "^2.0.0",
+    "@wethegit/react-hooks": "^3.0.1",
     "@wethegit/react-modal": "^2.0.0",
     "eslint": "^8.15.0",
     "eslint-config-custom": "*",

packages/wethegit-components/src/components/in-view/components/in-view-item/in-view-item.tsx

@@ -1,8 +1,7 @@
 import { useContext, useMemo } from "react"
 
-import { Tag } from "@local/components"
+import { Tag, InViewContext } from "@local/components"
 import type { TagProps } from "@local/components"
-import { InViewContext } from "@local/components/in-view"
 import { classnames, fixedForwardRef } from "@local/utilities"
 
 import type {

packages/wethegit-components/src/components/in-view/in-view.stories.tsx

@@ -8,10 +8,9 @@ const meta: Meta<typeof InView> = {
   title: "components/in-view/Example usage",
   component: InView,
   args: {
-    threshold: 0.3,
+    observerOptions: 0.3,
     once: false,
     setInViewIfScrolledPast: false,
-    matchRootMarginToThreshold: true,
   },
   decorators: [
     (Story) => (

packages/wethegit-components/src/components/in-view/in-view.tsx

@@ -1,63 +1,49 @@
-import { createContext, ElementType, useMemo } from "react"
+"use client"
+
+import { createContext, ElementType } from "react"
 import { useInView } from "@wethegit/react-hooks"
 
 import { Tag } from "@local/components"
 import type { TagProps } from "@local/components"
 
-export type InViewContext = {
+export type InViewContextReturn = {
   isInView: boolean
   domNode: HTMLElement | undefined
 }
 
 export type InViewProps<TAs extends ElementType> = TagProps<TAs> & {
   /**
    * Percentage of the entry within the viewport for it to be considered in
-   * view; a number between 0 and 1.
+   * view; a number between 0 and 1. Also accepts an IntersectionObserver options
+   * object.
    */
-  threshold?: number
+  observerOptions?: number | IntersectionObserverInit
   /**
-   * Unobserve the entry once it is considered to be in view.
+   * Whether to detach the observer from the DOM element after the first
+   * intersection callback is invoked.
    */
   once?: boolean
   /**
-   * Consider the entry "in view" if it is above the viewport when the page loads
-   * initially. This is most often used for ensuring that content is already
-   * animated in, when loading a document from a scroll position other than the top.
+   * Whether to consider the element already "in-view", if it is already scrolled
+   * beyond the bounds of the viewport when the element is mounted.
    */
   setInViewIfScrolledPast?: boolean
-  /**
-   * Ensure that the entry remains in view until it fully exits the viewport,
-   * regardless of the threshold. Note that this will not have any effect within
-   * an `<iframe>`.
-   */
-  matchRootMarginToThreshold?: boolean
 }
 
-export const InViewContext = createContext<InViewContext>({
+export const InViewContext = createContext<InViewContextReturn>({
   isInView: false,
   domNode: undefined,
 })
 
-export function InView<TAs extends ElementType>({
-  threshold = 0.3,
+export function InView<TAs extends ElementType, T extends HTMLElement>({
+  observerOptions = 0.3,
   once = false,
   setInViewIfScrolledPast = false,
-  matchRootMarginToThreshold = true,
   ...props
 }: InViewProps<TAs>) {
   const { as = "div", className, ...rest } = props
 
-  const observerOptions = useMemo(
-    () => ({
-      threshold,
-      ...(matchRootMarginToThreshold && {
-        rootMargin: `${threshold * 100}% 0px 0px 0px`,
-      }),
-    }),
-    [matchRootMarginToThreshold, threshold]
-  )
-
-  const [setRef, isInView, domNode] = useInView(
+  const [setRef, isInView, domNode] = useInView<T>(
     observerOptions,
     once,
     // only honor "setInViewIfScrolledPast" if "once" is true:

packages/wethegit-components/src/components/in-view/index.tsx

@@ -1,2 +1,3 @@
 export { InView, InViewContext } from "./in-view"
+export type { InViewContextReturn, InViewProps } from "./in-view"
 export * from "./components"

packages/wethegit-components/src/components/in-view/preset-examples.stories.tsx

@@ -34,10 +34,9 @@ const meta: Meta<typeof InView> = {
   title: "components/in-view/Presets",
   component: InView,
   args: {
-    threshold: 0.3,
+    observerOptions: 0.3,
     once: false,
     setInViewIfScrolledPast: false,
-    matchRootMarginToThreshold: true,
   },
   argTypes: {},
   decorators: [

packages/wethegit-components/src/components/in-view/readme.mdx

@@ -4,10 +4,10 @@ import { Meta } from "@storybook/blocks"
 
 # InView, InViewItem
 
-* [Install](#install)
-* [Usage](#usage)
-* [How it works](#how-it-works)
-* [Sequenced or staggered animations](#sequencing)
+- [Install](#install)
+- [Usage](#usage)
+- [How it works](#how-it-works)
+- [Sequenced or staggered animations](#sequencing)
 
 `<InView>` and `<InViewItem>` help you to create viewport-triggered CSS transitions on your React components. There are a handful of useful animation presets you can use, but you can also provide entirely custom ones.
 
@@ -20,7 +20,7 @@ npx @wethegit/components-cli add in-view
 ## Usage
 
 ```jsx
-import { InView, InViewItem, animation } from "@local/components/in-view"
+import { InView, InViewItem, animation } from "@local/components"
 ...
 
 <InView>
@@ -37,7 +37,7 @@ import { InView, InViewItem, animation } from "@local/components/in-view"
 
 For viewport detection, the `<InView>` component extends the `useInView` hook from [@wethegit/react-hooks](https://wethegit.github.io/react-hooks/). It then creates a React context for any children to subscribe to.
 
-The `<InViewItem>` component is one such child, and it accepts various props relating to animation when its parent is condsidered to be "in view" — `animation`, `delay`, `duration`, and `staggerChildren`.
+The `<InViewItem>` component is one such child, and it accepts various props relating to animation when its parent is condsidered to be "in view" — `animation`, `delay`, `duration`, and `staggerChildren`.
 
 ### Custom animation
 
@@ -63,7 +63,7 @@ As shown in the example above, you can use animation presets by importing the `a
 All of the `--start` values correspond to the initial state — i.e. when the component is not in view — and all of the `--end` values correspond to the component's "in view" state. Once you've written your CSS module, you just pass it in as the animation prop, like so:
 
 ```jsx
-import { InView, InViewItem } from "@local/components/in-view"
+import { InView, InViewItem } from "@local/components"
 import styles from "./your-component-styles.module.scss"
 
 function Component() {
@@ -86,7 +86,7 @@ The `<InViewItem>` components also accept a `staggerChildren` prop, which allows
 ### Example
 
 ```jsx
-import { InView, InViewItem } from "@local/components/in-view"
+import { InView, InViewItem } from "@local/components"
 import styles from "./your-component-styles.module.scss"
 
 function Component() {

yarn.lock

@@ -4330,6 +4330,11 @@
   resolved "https://registry.yarnpkg.com/@wethegit/react-hooks/-/react-hooks-2.0.4.tgz#ec982b526247658600bdff6086445afe72986b78"
   integrity sha512-9yls5kZafM7Azo1h84TSwe7NZ6vJfMsE4zFVv6iVZlrDBCkIroAsU65mMYs36ViviX2J2b5yXk4x+OVWSQXPZw==
 
+"@wethegit/react-hooks@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@wethegit/react-hooks/-/react-hooks-3.0.1.tgz#159a70e66f17772aae14721642f120265d997e76"
+  integrity sha512-kBh/tTt/s/SHJx03OZNv8PawkAOtbRjdoGSNJyLc3fVWD7N2wtmjpIc8mdir20oMO3W/0DuT3pNw5Pi7qNvFnQ==
+
 "@wethegit/react-modal@^2.0.0":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@wethegit/react-modal/-/react-modal-2.2.2.tgz#1742e969a0b05a9c22b45332589fb2baa0a41153"