#255 Move @mediamonks/transition-presence components into this repository

plop-templates/hook/{{camelCase hookName}}.mdx.hbs

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title='hooks/{{camelCase hookName}}' />
+<Meta title='Hooks / {{camelCase hookName}}' />
 
 # {{camelCase hookName}}
 

plop-templates/hook/{{camelCase hookName}}.stories.tsx.hbs

@@ -1,10 +1,12 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import type { ReactElement } from 'react';
 import { {{camelCase hookName}} } from './{{camelCase hookName}}.js';
 
-export default {
-  title: 'hooks/{{camelCase hookName}}',
-};
+const meta = {
+  title: 'Hooks / {{camelCase hookName}}',
+} satisfies Meta;
+
+type Story = StoryObj<typeof meta>;
 
 function DemoComponent(): ReactElement {
   {{camelCase hookName}}();
@@ -28,7 +30,7 @@ function DemoComponent(): ReactElement {
   );
 }
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     return <DemoComponent />;
   }

src/_utils/childrenAreEqual.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactFragment } from 'react';
+
+export function childrenAreEqual(
+  previousChildren: ReactElement | ReactFragment | null,
+  nextChildren: ReactElement | ReactFragment | null,
+): boolean {
+  if (previousChildren === nextChildren) {
+    return true;
+  }
+
+  // React reconciler will create a new instance when children type changes
+  if (
+    (previousChildren !== null && 'type' in previousChildren && previousChildren.type) !==
+    (nextChildren !== null && 'type' in nextChildren && nextChildren.type)
+  ) {
+    return false;
+  }
+
+  // React reconciler will create a new instance when children key changes
+  if (
+    (previousChildren !== null && 'key' in previousChildren && previousChildren.key) !==
+    (nextChildren !== null && 'key' in nextChildren && nextChildren.key)
+  ) {
+    return false;
+  }
+
+  return true;
+}

src/_utils/getId.ts

@@ -0,0 +1,5 @@
+let id = 0;
+
+export function getId(): string {
+  return (id++ % Number.MAX_SAFE_INTEGER).toString();
+}

src/components/AutoFill/AutoFill.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import * as stories from './AutoFill.stories';
 
-<Meta title="components/AutoFill" />
+<Meta title="Components / AutoFill" />
 
 # AutoFill
 

src/components/AutoFill/AutoFill.stories.tsx

@@ -1,19 +1,18 @@
-/* eslint-disable react/jsx-no-literals, react/no-multi-comp */
+/* eslint-disable react/jsx-no-literals */
 import { type Meta, type StoryObj } from '@storybook/react';
-import type { ReactElement } from 'react';
 import { AutoFill } from './AutoFill.js';
 
 const meta = {
-  title: 'components/AutoFill',
+  title: 'Components / AutoFill',
   component: AutoFill,
 } satisfies Meta;
 
 type Story = StoryObj<typeof meta>;
 
 export default meta;
 
-export const Horizontal = {
-  render(): ReactElement {
+export const Horizontal: Story = {
+  render() {
     return (
       <div
         style={{
@@ -59,10 +58,10 @@ export const Horizontal = {
   args: {
     children: <div />,
   },
-} satisfies Story;
+};
 
-export const Vertical = {
-  render(): ReactElement {
+export const Vertical: Story = {
+  render() {
     return (
       <div
         style={{
@@ -95,4 +94,4 @@ export const Vertical = {
   args: {
     children: <div />,
   },
-} satisfies Story;
+};

src/hocs/ensuredForwardRef/ensuredForwardRef.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Higher-Order Components/ensuredForwardRef" />
+<Meta title="Higher-Order components / ensuredForwardRef" />
 
 # ensuredForwardRef
 

src/hooks/useClientSideValue/useClientSideValue.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useClientSideValue" />
+<Meta title="Hooks / useClientSideValue" />
 
 # useClientSideValue
 

src/hooks/useClientSideValue/useClientSideValue.stories.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable react/jsx-no-literals */
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useClientSideValue } from './useClientSideValue.js';
 
-export default {
-  title: 'hooks/useClientSideValue',
-};
+const meta = {
+  title: 'Hooks / useClientSideValue',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const note = (
   <div className="alert alert-secondary">
@@ -17,7 +21,7 @@ const note = (
   </div>
 );
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     const value = useClientSideValue(Date.now, 0);
 
@@ -33,7 +37,7 @@ export const Demo: StoryObj = {
   },
 };
 
-export const Nullable: StoryObj = {
+export const Nullable: Story = {
   render() {
     const value = useClientSideValue<number | null>(Date.now, null);
 

src/hooks/useClientSideValue/useClientSideValue.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useMount } from '../useMount/useMount.js';
+import { useMount } from '../../lifecycle/hooks/useMount/useMount.js';
 
 /**
  * Hook that returns the value returned by a callback function that is only called on client-side.

src/hooks/useEventListener/useEventListener.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useEventListener" />
+<Meta title="Hooks / useEventListener" />
 
 # useEventListener
 

src/hooks/useEventListener/useEventListener.stories.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable react/jsx-no-literals */
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState, type ReactElement } from 'react';
 import { useEventListener } from './useEventListener.js';
 
-export default {
-  title: 'hooks/useEventListener',
-};
+const meta = {
+  title: 'Hooks / useEventListener',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 function DemoComponent(): ReactElement {
   const [text, setText] = useState<ReadonlyArray<string>>([]);
@@ -40,7 +44,7 @@ function DemoComponent(): ReactElement {
   );
 }
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     return <DemoComponent />;
   },

src/hooks/useForceRerender/useForceRerender.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/lifecycle/useForceRerender" />
+<Meta title="Hooks / useForceRerender" />
 
 # useForceRerender
 

src/hooks/useForceRerender/useForceRerender.stories.tsx

@@ -1,10 +1,14 @@
 /* eslint-disable react/jsx-no-literals,react/jsx-handler-names */
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useForceRerender } from './useForceRerender.js';
 
-export default {
-  title: 'hooks/lifecycle/useForceRerender',
-};
+const meta = {
+  title: 'Hooks / useForceRerender',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 function DemoComponent(): JSX.Element {
   const forceRerender = useForceRerender();
@@ -28,7 +32,7 @@ function DemoComponent(): JSX.Element {
   );
 }
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     return <DemoComponent />;
   },

src/hooks/useHasFocus/useHasFocus.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useHasFocus" />
+<Meta title="Hooks / useHasFocus" />
 
 # useHasFocus
 

src/hooks/useHasFocus/useHasFocus.stories.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable react/jsx-no-literals */
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import { useHasFocus } from './useHasFocus.js';
 
-export default {
-  title: 'hooks/useHasFocus',
-};
+const meta = {
+  title: 'Hooks / useHasFocus',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 function DemoComponent(): ReactElement {
   const ref = useRef<HTMLButtonElement>(null);
@@ -37,7 +41,7 @@ function DemoComponent(): ReactElement {
   );
 }
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     return <DemoComponent />;
   },

src/hooks/useIntersectionObserver/useIntersectionObserver.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as stories from './useIntersectionObserver.stories';
 
-<Meta title="hooks/useIntersectionObserver" />
+<Meta title="Hooks / useIntersectionObserver" />
 
 # useIntersectionObserver
 

src/hooks/useIntersectionObserver/useIntersectionObserver.stories.tsx

@@ -7,7 +7,7 @@ import { arrayRef } from '../../index.js';
 import { useIntersectionObserver } from './useIntersectionObserver.js';
 
 const meta = {
-  title: 'hooks/useIntersectionObserver',
+  title: 'Hooks / useIntersectionObserver',
 } satisfies Meta;
 
 export default meta;

src/hooks/useInterval/useInterval.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useInterval" />
+<Meta title="Hooks / useInterval" />
 
 # `useInterval`
 

src/hooks/useInterval/useInterval.stories.tsx

@@ -4,7 +4,7 @@ import { useRef, useState, type ReactElement } from 'react';
 import { useInterval } from './useInterval.js';
 
 const meta = {
-  title: 'hooks/useInterval',
+  title: 'Hooks / useInterval',
 } satisfies Meta;
 
 type Story = StoryObj<typeof meta>;

src/hooks/useMediaDuration/useMediaDuration.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useMediaDuration" />
+<Meta title="Hooks / useMediaDuration" />
 
 # useMediaDuration
 

src/hooks/useMediaDuration/useMediaDuration.stories.tsx

@@ -1,13 +1,17 @@
 /* eslint-disable react/jsx-no-literals */
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import type { ReactElement } from 'react';
 import { useRefs } from '../useRefs/useRefs.js';
 import type { MutableRefs } from '../useRefs/useRefs.types.js';
 import { useMediaDuration } from './useMediaDuration.js';
 
-export default {
-  title: 'hooks/useMediaDuration',
-};
+const meta = {
+  title: 'Hooks / useMediaDuration',
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export type DemoComponentRefs = MutableRefs<{
   video: HTMLVideoElement;
@@ -54,7 +58,7 @@ function DemoComponent(): ReactElement {
   );
 }
 
-export const Demo: StoryObj = {
+export const Demo: Story = {
   render() {
     return <DemoComponent />;
   },

src/hooks/useMediaQuery/useMediaQuery.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useMediaQuery" />
+<Meta title="Hooks / useMediaQuery" />
 
 # useMediaQuery