docs: add recipies and transition prop examples

README.md

@@ -41,7 +41,7 @@
 
 ## Demo
 
-- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-introduction--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos)
+- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-introduction--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos), [recipies](https://react-compare-slider.vercel.app/?path=/story/recipies)
 - CodeSandbox: [basic demo](https://codesandbox.io/p/sandbox/github/nerdyman/react-compare-slider/tree/main/docs/example?file=/src/App.tsx:1,1)
 - [Local example](./docs/example)
 

docs/CONTRIBUTING.md

@@ -4,11 +4,11 @@ Thanks for contributing!
 
 ## Getting Started
 
-This is a pnpm monorepo, consisting of the main package in the root of the repo and [`storybook`](./storybook/) and [`example`](./example/) packages in the `packages` directory.
+This is a pnpm monorepo, consisting of the main package in the root of the repo and [`storybook`](./storybook/) and [`example`](./example/) packages in the `docs` directory.
 packages in the `docs` folder. Don't worry if you haven't used pnpm or monorepos before, the
 commands below will set everything up for you.
 
-Ensure you're using the Node version specified in [.nvmrc](./.nvmrc) and run the following to
+Ensure you're using the Node version specified in [.nvmrc](../.nvmrc) and run the following to
 bootstrap the project:
 
 ```sh
@@ -59,4 +59,4 @@ pnpm run test:ci
 
 ## VS Code
 
-If you're using VS Code please make sure you install the [recommended extensions](./.vscode/extensions.json).
+If you're using VS Code please make sure you install the [recommended extensions](../.vscode/extensions.json).

docs/example/README.md

@@ -1,7 +1,7 @@
 # React Compare Slider Demo
 
 - 🧑‍💻 [CodeSandbox Demo](https://codesandbox.io/p/sandbox/github/nerdyman/react-compare-slider/tree/main/docs/example?file=/src/App.tsx:1,1)
-- 🐙 [Github Repo](https://github.com/nerdyman/react-compare-slider)
+- 🐙 [GitHub Repo](https://github.com/nerdyman/react-compare-slider)
 
 ---
 

docs/storybook/.storybook/preview-head.html

@@ -4,8 +4,8 @@
     --rcs-brand-alpha: rgba(89, 47, 114, 0.25);
     --sb-brand-outline-base: rgba(255, 255, 255, 0.1);
     --sb-brand-contrast: #ffffff;
-    --sb-surface-top-base: rgb(39, 37, 39, 0.5);
-    --sb-surface-middle-base: rgb(39, 37, 39, 0.25);
+    --sb-surface-top-base: rgba(39, 37, 39, 0.5);
+    --sb-surface-middle-base: rgba(39, 37, 39, 0.25);
   }
 
   html,
@@ -16,6 +16,7 @@
   body {
     margin: 0 !important;
     padding: 0 !important;
+    font-family: system-ui, sans-serif;
   }
 
   .sidebar-item.selected {

docs/storybook/content/05-only-handle-draggable.stories.mdx

@@ -32,7 +32,7 @@ const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 </Canvas>
 
 <Canvas>
-  <Story id="recipies-detecttouchdevices--detect-touch-devices" />
+  <Story id="recipies--detect-touch-devices" />
 </Canvas>
 
 <Canvas>

docs/storybook/content/09-transition.stories.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+<Meta title="Docs/Transition" component={ReactCompareSlider} />
+
+# Using `transition`
+
+The `transition` property applies a CSS transition when the slider is moved. The shorthand CSS
+property syntax is used **without** the `transition-property` value. The library sets which property
+to apply the transition to internally.
+
+You may notice that the slider sometimes moves immediately to the new position, this is because the
+transition only applies to `pointerdown` events to ensure the dragging movement of the slider is smooth.
+This means the transition will be cancelled if `pointerdown` is followed by a `pointermove` event.
+
+```jsx
+<ReactCompareSlider
+  transition="0.25s cubic-bezier(.17,.67,.83,.67)"
+/>
+```
+
+<Canvas>
+  <Story id="demos--transition" />
+</Canvas>
+
+## Live Examples
+
+Checkout the [Transition example](/story/demos--transition).

docs/storybook/content/stories/00-demos/00-index.stories.tsx

@@ -332,13 +332,13 @@ export const Transition: StoryFn<ReactCompareSliderProps> = (props) => {
       ref={reactCompareSliderRef}
       itemOne={
         <ReactCompareSliderImage
-          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-skyline-1.jpg"
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-1.jpg"
           alt="Image one"
         />
       }
       itemTwo={
         <ReactCompareSliderImage
-          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-skyline-2.jpg"
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-2.jpg"
           alt="Image two"
         />
       }

docs/storybook/content/stories/02-recipies/00-index.stories.tsx

@@ -1,18 +1,73 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import type { ReactCompareSliderProps } from 'react-compare-slider';
+import type { ReactCompareSliderDetailedProps } from 'react-compare-slider';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
 import { argTypes, args } from '../config';
 
 export default {
-  title: 'Recipies/DetectTouchDevices',
+  title: 'Recipies',
   component: ReactCompareSlider,
   args,
   argTypes,
 } as Meta;
 
-export const DetectTouchDevices: StoryFn<ReactCompareSliderProps> = (props) => {
+export const Labels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
+  const [labelVisibility, setLabelVisibility] = React.useState(1);
+
+  const labelStyle = {
+    fontSize: '1.5rem',
+    position: 'absolute',
+    padding: '1rem',
+    color: 'white',
+    opacity: labelVisibility,
+    border: '2px solid white',
+    borderRadius: '.5rem',
+    backdropFilter: 'blur(0.25rem) saturate(180%) contrast(80%) brightness(120%)',
+    transition: 'opacity 0.25s ease-in-out',
+  };
+
+  console.log('!!', props.style);
+
+  return (
+    <ReactCompareSlider
+      {...props}
+      onPointerDown={() => setLabelVisibility(0)}
+      onPointerUp={() => setLabelVisibility(1)}
+      itemOne={
+        <div
+          style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'start' }}
+        >
+          <div style={labelStyle}>Left</div>
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-1.jpg"
+            alt="Image one"
+          />
+        </div>
+      }
+      itemTwo={
+        <div
+          style={{ display: 'flex', alignItems: 'center', height: '100%', justifyContent: 'end' }}
+        >
+          <div style={labelStyle}>Right</div>
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-2.jpg"
+            alt="Image two"
+          />
+        </div>
+      }
+    />
+  );
+};
+
+Labels.args = {
+  style: {
+    width: '100%',
+    height: '100vh',
+  },
+};
+
+export const DetectTouchDevices: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
   const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 
   return (
@@ -65,3 +120,42 @@ DetectTouchDevices.argTypes = {
 };
 
 DetectTouchDevices.args = {};
+
+export const WaitForImageLoad: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
+  const [loaded, setLoaded] = React.useState(0);
+  const imagesStyle = {
+    opacity: loaded === 2 ? 1 : 0,
+    transition: 'opacity 1s 0.5s ease-in-out',
+  };
+
+  return (
+    <ReactCompareSlider
+      {...props}
+      itemOne={
+        <ReactCompareSliderImage
+          style={imagesStyle}
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-1.jpg"
+          alt="Image one"
+          onLoad={() => setLoaded((prev) => prev + 1)}
+        />
+      }
+      itemTwo={
+        <ReactCompareSliderImage
+          style={imagesStyle}
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-2.jpg"
+          alt="Image two"
+          onLoad={() => setLoaded((prev) => prev + 1)}
+        />
+      }
+    />
+  );
+};
+
+WaitForImageLoad.args = {
+  style: {
+    width: '100%',
+    height: '100vh',
+    backgroundColor: 'black',
+    backgroundImage: 'radial-gradient(rgba(200, 109, 252, .5), rgba(39, 37, 39, .5))',
+  },
+};