Merge pull request #256 from mediamonks/#255-move-mediamonkstransitio…

…n-presence-componentshooks-to-this-repository #255 Move @mediamonks/transition-presence components into this repository
mediamonks · Nov 10, 2023 · a437fa5 · a437fa5
2 parents 43ea47f + 49c9102
commit a437fa5
Show file tree

Hide file tree

Showing 73 changed files with 1,208 additions and 126 deletions.
diff --git a/plop-templates/hook/{{camelCase hookName}}.mdx.hbs b/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}}
 

diff --git a/plop-templates/hook/{{camelCase hookName}}.stories.tsx.hbs b/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 />;
   }

diff --git a/src/_utils/childrenAreEqual.ts b/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;
+}
diff --git a/src/_utils/getId.ts b/src/_utils/getId.ts
@@ -0,0 +1,5 @@
+let id = 0;
+
+export function getId(): string {
+  return (id++ % Number.MAX_SAFE_INTEGER).toString();
+}
diff --git a/src/components/AutoFill/AutoFill.mdx b/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
 

diff --git a/src/components/AutoFill/AutoFill.stories.tsx b/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;
+};
diff --git a/src/hocs/ensuredForwardRef/ensuredForwardRef.mdx b/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
 

diff --git a/src/hooks/useClientSideValue/useClientSideValue.mdx b/src/hooks/useClientSideValue/useClientSideValue.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useClientSideValue" />
+<Meta title="Hooks / useClientSideValue" />
 
 # useClientSideValue
 

diff --git a/src/hooks/useClientSideValue/useClientSideValue.stories.tsx b/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);
 

diff --git a/src/hooks/useClientSideValue/useClientSideValue.ts b/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.

diff --git a/src/hooks/useEventListener/useEventListener.mdx b/src/hooks/useEventListener/useEventListener.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useEventListener" />
+<Meta title="Hooks / useEventListener" />
 
 # useEventListener
 

diff --git a/src/hooks/useEventListener/useEventListener.stories.tsx b/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 />;
   },

diff --git a/src/hooks/useForceRerender/useForceRerender.mdx b/src/hooks/useForceRerender/useForceRerender.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/lifecycle/useForceRerender" />
+<Meta title="Hooks / useForceRerender" />
 
 # useForceRerender
 

diff --git a/src/hooks/useForceRerender/useForceRerender.stories.tsx b/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 />;
   },

diff --git a/src/hooks/useHasFocus/useHasFocus.mdx b/src/hooks/useHasFocus/useHasFocus.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useHasFocus" />
+<Meta title="Hooks / useHasFocus" />
 
 # useHasFocus
 

diff --git a/src/hooks/useHasFocus/useHasFocus.stories.tsx b/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 />;
   },

diff --git a/src/hooks/useIntersectionObserver/useIntersectionObserver.mdx b/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
 

diff --git a/src/hooks/useIntersectionObserver/useIntersectionObserver.stories.tsx b/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;

diff --git a/src/hooks/useInterval/useInterval.mdx b/src/hooks/useInterval/useInterval.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useInterval" />
+<Meta title="Hooks / useInterval" />
 
 # `useInterval`
 

diff --git a/src/hooks/useInterval/useInterval.stories.tsx b/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>;

diff --git a/src/hooks/useMediaDuration/useMediaDuration.stories.mdx b/src/hooks/useMediaDuration/useMediaDuration.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useMediaDuration" />
+<Meta title="Hooks / useMediaDuration" />
 
 # useMediaDuration
 

diff --git a/src/hooks/useMediaDuration/useMediaDuration.stories.tsx b/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 />;
   },

diff --git a/src/hooks/useMediaQuery/useMediaQuery.mdx b/src/hooks/useMediaQuery/useMediaQuery.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useMediaQuery" />
+<Meta title="Hooks / useMediaQuery" />
 
 # useMediaQuery