docs: update readme and add label recipes

nerdyman · Oct 21, 2023 · 725e146 · 725e146
1 parent aab0c56
commit 725e146
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -4,25 +4,13 @@
 
 [![Example](https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/docs/hero.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 
-<a href="https://github.com/nerdyman/react-compare-slider/blob/main/LICENSE">
-  <img alt="License MIT" src="https://img.shields.io/npm/l/react-compare-slider.svg" />
-</a>
-<a href="https://npmjs.com/package/react-compare-slider">
-  <img  alt="npm version" src="https://img.shields.io/npm/v/react-compare-slider.svg" />
-</a>
-<a href="https://bundlephobia.com/result?p=react-compare-slider">
-  <img alt="Bundle size" src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" />
-</a>
+<a href="https://github.com/nerdyman/react-compare-slider/blob/main/LICENSE"><img alt="License MIT" src="https://img.shields.io/npm/l/react-compare-slider.svg" /></a>
+<a href="https://npmjs.com/package/react-compare-slider"><img  alt="npm version" src="https://img.shields.io/npm/v/react-compare-slider.svg" /></a>
+<a href="https://bundlephobia.com/result?p=react-compare-slider"><img alt="Bundle size" src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" /></a>
 <br/>
-<a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild">
-  <img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" />
-</a>
-<a href="https://codeclimate.com/github/nerdyman/react-compare-slider">
-  <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" />
-</a>
-<a href="https://react-compare-slider.vercel.app">
-  <img  alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" />
-</a>
+<a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild"><img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" /></a>
+<a href="https://codeclimate.com/github/nerdyman/react-compare-slider/code?q=lib"><img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" /></a>
+<a href="https://react-compare-slider.vercel.app"><img  alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" /></a>
 
 </div>
 

diff --git a/docs/storybook/content/00-introduction.stories.mdx b/docs/storybook/content/00-introduction.stories.mdx
@@ -5,7 +5,7 @@ import React from 'react';
 
 <div style={{ maxWidth: '42rem', margin: '0 auto' }}>
 
-  <div style={{ textAlign: 'center' }}>
+<div style={{ textAlign: 'center' }}>
 
 # React Compare Slider
 
@@ -29,16 +29,16 @@ import React from 'react';
   <a href="https://github.com/nerdyman/react-compare-slider/actions?query=workflow%3Abuild">
     <img alt="GitHub CI status" src="https://img.shields.io/github/actions/workflow/status/nerdyman/react-compare-slider/ci.yml" />
   </a>
-  <a href="https://codecov.io/github/nerdyman/react-compare-slider" > 
-    <img alt="Code coverage" src="https://img.shields.io/codecov/c/github/nerdyman/react-compare-slider?token=yhvFTuC7bh" />
+  <a href="https://codeclimate.com/github/nerdyman/react-compare-slider/code?q=lib">
+    <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" />
   </a>
   <a href="https://github.com/nerdyman/react-compare-slider">
     <img  alt="Source code" src="https://img.shields.io/badge/🐙-source-blue.svg" />
   </a>
 </div>
 
-A lightweight and extensible slider component to compare any two React components in landscape or portrait orientation. 
-It supports custom images, videos, canvases... and everything else. 
+A lightweight and extensible slider component to compare any two React components in landscape or portrait orientation.
+It supports custom images, videos, canvases... and everything else.
 
 </div>
 
@@ -60,16 +60,15 @@ It supports custom images, videos, canvases... and everything else.
 
 ## Demos
 
-Storybook demos are within iframes which can sometimes cause the slider position to not 
-meet the edges of the container when sliding quickly - this is a browser limitation and 
+Storybook demos are within iframes which can sometimes cause the slider position to not
+meet the edges of the container when sliding quickly - this is a browser limitation and
 only occurs when the slider is within an iframe.
 
 ## Real World Examples
 
 - [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
-- [RestorePhotos.io](https://www.restorephotos.io/restore)
 - [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
-- [DevTools-X, A collection of offline first developer utilities](https://github.com/fosslife/devtools-x)
+- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2)
 
 ---
 

diff --git a/docs/storybook/content/stories/00-demos/00-index.stories.tsx b/docs/storybook/content/stories/00-demos/00-index.stories.tsx
@@ -10,12 +10,13 @@ import {
 import { SLIDER_ROOT_TEST_ID } from '../99-tests/test-utils.test';
 import { argTypes, args } from '../config';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Demos',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
 export const Images: StoryFn<ReactCompareSliderProps> = (props) => {
   return (

diff --git a/docs/storybook/content/stories/00-demos/02-edge-cases.stories.tsx b/docs/storybook/content/stories/00-demos/02-edge-cases.stories.tsx
@@ -4,12 +4,13 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 
 import { argTypes, args } from '../config';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Demos/Edge Cases',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
 export const Scaled: StoryFn<ReactCompareSliderDetailedProps> = ({ style, ...props }) => (
   <ReactCompareSlider

diff --git a/.../stories/02-recipies/00-index.stories.tsx → ...t/stories/01-recipes/00-index.stories.tsx b/.../stories/02-recipies/00-index.stories.tsx → ...t/stories/01-recipes/00-index.stories.tsx
@@ -3,24 +3,26 @@ import React from 'react';
 import type { ReactCompareSliderDetailedProps } from 'react-compare-slider';
 import {
   ReactCompareSlider,
+  ReactCompareSliderHandle,
   ReactCompareSliderImage,
   useReactCompareSliderRef,
 } from 'react-compare-slider';
 
 import { argTypes, args } from '../config';
 
-export default {
-  title: 'Recipies',
+const meta: Meta<typeof ReactCompareSlider> = {
+  title: 'Recipes',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
-export const Labels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
+export const ItemLabels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
   const [labelOpacity, setLabelOpacity] = React.useState(1);
 
   const labelStyle = {
-    fontSize: '1.5rem',
+    fontSize: '1.25rem',
     position: 'absolute',
     padding: '1rem',
     color: 'white',
@@ -62,7 +64,58 @@ export const Labels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
   );
 };
 
-Labels.args = {
+ItemLabels.args = {
+  style: {
+    width: '100%',
+    height: '100vh',
+  },
+};
+
+export const HandleLabels: StoryFn<ReactCompareSliderDetailedProps> = (props) => {
+  const [labelOpacity, setLabelOpacity] = React.useState(1);
+
+  const labelStyle = {
+    fontSize: '.75rem',
+    position: 'absolute',
+    padding: '.25rem',
+    color: 'white',
+    opacity: labelOpacity,
+    borderRadius: '.25rem',
+    border: '1px solid white',
+    backdropFilter: 'blur(0.25rem) saturate(180%) contrast(80%) brightness(120%)',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    transition: 'opacity 0.25s ease-in-out',
+  };
+
+  return (
+    <ReactCompareSlider
+      {...props}
+      onPointerDown={() => setLabelOpacity(0)}
+      onPointerUp={() => setLabelOpacity(1)}
+      itemOne={
+        <ReactCompareSliderImage
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-1.jpg"
+          alt="Image one"
+        />
+      }
+      itemTwo={
+        <ReactCompareSliderImage
+          src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/seattle-space-needle-2.jpg"
+          alt="Image two"
+        />
+      }
+      handle={
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <ReactCompareSliderHandle />
+          <div style={{ ...labelStyle, translate: '-100% 0', left: 0 }}>Label 1</div>
+          <div style={{ ...labelStyle, translate: '100% 0', right: 0 }}>Label 2</div>
+        </div>
+      }
+    />
+  );
+};
+
+HandleLabels.args = {
   style: {
     width: '100%',
     height: '100vh',

diff --git a/...es/02-recipies/01-google-maps.stories.tsx → ...ies/01-recipes/01-google-maps.stories.tsx b/...es/02-recipies/01-google-maps.stories.tsx → ...ies/01-recipes/01-google-maps.stories.tsx
@@ -7,12 +7,13 @@ import { ReactCompareSlider } from 'react-compare-slider';
 
 import { argTypes, args } from '../config';
 
-export default {
-  title: 'Recipies/GoogleMaps',
+const meta: Meta<typeof ReactCompareSlider> = {
+  title: 'Recipes/Google Maps',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
 const useGoogleMap = () => {
   const [map, setMap] = React.useState<any>(null);

diff --git a/...0-react-compare-slider-handle.stories.tsx → ...0-react-compare-slider-handle.stories.tsx b/...0-react-compare-slider-handle.stories.tsx → ...0-react-compare-slider-handle.stories.tsx
@@ -8,12 +8,13 @@ import {
 
 import { argTypes, args } from '../config';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Handles',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
 export const InheritedColor: StoryFn<ReactCompareSliderProps> = ({ portrait, ...props }) => (
   <ReactCompareSlider

diff --git a/...t/stories/01-handle/01-custom.stories.tsx → .../stories/02-handles/01-custom.stories.tsx b/...t/stories/01-handle/01-custom.stories.tsx → .../stories/02-handles/01-custom.stories.tsx
@@ -5,12 +5,13 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 
 import { argTypes, args } from '../config';
 
-export default {
-  title: 'Handles/CustomComponent',
+const meta: Meta<typeof ReactCompareSlider> = {
+  title: 'Handles/Custom Component',
   component: ReactCompareSlider,
   args,
   argTypes,
-} as Meta;
+};
+export default meta;
 
 export const CustomComponent: StoryFn<ReactCompareSliderProps> = (props) => {
   const CustomHandle: React.FC = () => {

diff --git a/docs/storybook/content/stories/99-tests/default.test.stories.tsx b/docs/storybook/content/stories/99-tests/default.test.stories.tsx
@@ -1,12 +1,14 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { waitFor, within } from '@storybook/testing-library';
+import type { ReactCompareSlider } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Tests/Browser/Default',
-} as Meta;
+};
+export default meta;
 
 /** Test default props. */
 export const Default = Template.bind({});

diff --git a/docs/storybook/content/stories/99-tests/disabled.test.stories.tsx b/docs/storybook/content/stories/99-tests/disabled.test.stories.tsx
@@ -1,12 +1,14 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
+import type { ReactCompareSlider } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Tests/Browser/Disabled',
-} as Meta;
+};
+export default meta;
 
 export const Disabled: typeof Template = (args) => (
   <div>

diff --git a/docs/storybook/content/stories/99-tests/keyboard-interactions.test.stories.tsx b/docs/storybook/content/stories/99-tests/keyboard-interactions.test.stories.tsx
@@ -1,12 +1,14 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import type { ReactCompareSlider } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Tests/Browser/Keyboard Interactions',
-} satisfies Meta;
+};
+export default meta;
 
 export const KeyboardInteractionsLandscape = Template.bind({});
 

diff --git a/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx b/docs/storybook/content/stories/99-tests/pointer-interactions.stories.tsx
@@ -6,9 +6,10 @@ import { ReactCompareSlider } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
-  title: 'Tests/Browser/Pointer Interactions',
-} as Meta;
+const meta: Meta<typeof ReactCompareSlider> = {
+  title: 'Tests/Browser/Interactions',
+};
+export default meta;
 
 export const PointerMovementWithinBounds = Template.bind({ style: { width: 200, height: 200 } });
 PointerMovementWithinBounds.args = getArgs({ style: { width: 200, height: 200 } });

diff --git a/docs/storybook/content/stories/99-tests/position.test.stories.tsx b/docs/storybook/content/stories/99-tests/position.test.stories.tsx
@@ -7,9 +7,10 @@ import { ReactCompareSlider } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Tests/Browser/Position',
-} as Meta;
+};
+export default meta;
 
 export const StartAt0 = Template.bind({});
 StartAt0.args = getArgs({ position: 0 });

diff --git a/docs/storybook/content/stories/99-tests/react-compare-slider-handle.test.stories.tsx b/docs/storybook/content/stories/99-tests/react-compare-slider-handle.test.stories.tsx
@@ -1,13 +1,15 @@
 import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { waitFor, within } from '@storybook/testing-library';
+import type { ReactCompareSlider } from 'react-compare-slider';
 import { ReactCompareSliderHandle as BaseReactCompareSliderHandle } from 'react-compare-slider';
 
 import { Template, getArgs } from './test-utils.test';
 
-export default {
+const meta: Meta<typeof ReactCompareSlider> = {
   title: 'Tests/Browser/ReactCompareSliderHandle',
-} as Meta;
+};
+export default meta;
 
 /** Test `handle`. */
 export const ReactCompareSliderHandle = Template.bind({});
@@ -20,25 +22,25 @@ ReactCompareSliderHandle.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const handle = canvas.queryByTestId('handlearoo');
 
-  waitFor(() => expect(handle).toBeInTheDocument());
+  await waitFor(() => expect(handle).toBeInTheDocument());
 
   // Lines should inherit color.
-  waitFor(() =>
+  await waitFor(() =>
     expect(
       window.getComputedStyle(handle?.querySelector('.__rcs-handle-line') as HTMLElement)
         .backgroundColor,
     ).toBe('rgb(255, 0, 0)'),
   );
 
   // Button should inherit color.
-  waitFor(() =>
+  await waitFor(() =>
     expect(
       window.getComputedStyle(handle?.querySelector('.__rcs-handle-button') as HTMLElement).color,
     ).toBe('rgb(255, 0, 0)'),
   );
 
   // Arrows should inherit color.
-  waitFor(() =>
+  await waitFor(() =>
     expect(
       window.getComputedStyle(handle?.querySelector('.__rcs-handle-arrow') as HTMLElement).color,
     ).toBe('rgb(255, 0, 0)'),