docs: restructure docs, use vercel links, add google maps demo

nerdyman · Sep 6, 2020 · 883bc94 · 883bc94
1 parent ef3043d
commit 883bc94
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 334 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,9 +3,9 @@ const codesandbox = require('remark-codesandbox');
 
 module.exports = {
   addons: [
-    '@storybook/addon-storysource',
     '@storybook/addon-viewport',
-    '@storybook/addon-links',
+    '@storybook/addon-controls',
+    '@storybook/addon-storysource',
     {
       name: '@storybook/addon-docs',
       options: {
@@ -20,7 +20,6 @@ module.exports = {
         },
       },
     },
-    '@storybook/addon-controls',
     '@storybook/addon-actions/register',
   ],
   babel: (config) => ({

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -6,4 +6,4 @@
 <meta property="og:site_name" content="React Compare Slider" />
 <meta name="robots" content="index,follow" />
 <meta name="googlebot" content="index,follow" />
-<link rel="canonical" href="https://react-compare-slider.netlify.app" />
+<link rel="canonical" href="https://react-compare-slider.vercel.app" />
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,8 +1,10 @@
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { addParameters } from '@storybook/react';
+import { addDecorator, addParameters } from '@storybook/react';
 import { themes } from '@storybook/theming';
-import '@storybook/addon-console';
+import { withConsole } from '@storybook/addon-console';
+
+addDecorator((storyFn, context) => withConsole()(storyFn)(context));
 
 addParameters({
   controls: {

diff --git a/README.md b/README.md
@@ -20,8 +20,8 @@
 <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.netlify.app">
-    <img src="https://img.shields.io/badge/demos-🚀-blue.svg" alt="Demos" />
+<a href="https://react-compare-slider.vercel.app">
+    <img src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" alt="Demos" />
 </a>
 
 </div>
@@ -30,7 +30,7 @@
 
 ## Features
 
-- Supports responsive images and any other React components ( `picture`, `canvas`, `iframe` etc.)
+- Supports responsive images and any other React components (`picture`, `video`, `canvas`, `iframe` etc.)
 - Supports landscape and portrait orientations
 - Simple API
 - Unopinionated & fully customizable &ndash; optionally use your own components and styles
@@ -41,7 +41,7 @@
 
 ## Demo
 
-- Storybook: [docs](https://react-compare-slider.netlify.app/?path=/docs/docs-intro--page), [demos](https://react-compare-slider.netlify.app/?path=/docs/demos-images)
+- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-intro--page), [demos](https://react-compare-slider.vercel.app/?path=/story/demos--images)
 - CodeSandbox: [basic editable demo](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l)
 - [Local example](./example)
 
@@ -69,39 +69,39 @@ import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slide
 />
 ```
 
-See the [Images docs](https://react-compare-slider.netlify.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.netlify.app/?path=/docs/demos-images).
+See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-images--page) for more information and [demos](https://react-compare-slider.vercel.app/?path=/docs/demos-images).
 
 ## Props
 
 | Prop | Type | Required | Default value | Description |
 |------|------|:--------:|---------------|-------------|
-| `boundsPadding`    | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
-| `handle`    | `ReactNode` |   | `undefined` | Custom handle component. |
+| [`boundsPadding`](https://react-compare-slider.vercel.app/?path=/story/docs-bounds-padding--page) | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
+| [`handle`](https://react-compare-slider.vercel.app/?path=/story/docs-handles--page) | `ReactNode` |   | `undefined` | Custom handle component. |
 | `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider. |
 | `itemTwo`   | `ReactNode` | ✓ | `undefined` | Second component to show in slider. |
-| `onlyHandleDraggable`  | `boolean`  |   | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
+| [`onlyHandleDraggable`](https://react-compare-slider.vercel.app/?path=/story/docs-only-handle-draggable--page) | `boolean`  |   | `false` | Whether to only change position when handle is interacted with (useful for touch devices). |
 | `onPositionChange`  | `function`  |   | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
 | `portrait`  | `boolean`   |   | `false` | Whether to use portrait orientation. |
 | `position`  | `number`    |   | `50` | Initial percentage position of divide (`0-100`). |
 
-See the [API docs](https://react-compare-slider.netlify.app/?path=/docs/docs-api--page) for more information.
+See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.
 
 ## Extending
 
 ### Custom Items
 
-The library supports all types of React components; custom components can apply 
-the same base styles as `ReactCompareSliderImage`  by using the 
-`styleFitContainer` CSS utility. 
+The library supports all types of React components.
 
-See the [styleFitContainer docs](https://react-compare-slider.netlify.app/?path=/docs/docs-api--page#stylefitcontainer)
-for more information.
+- [Google Maps Demo](https://react-compare-slider.vercel.app/?path=/story/demos-custom-components--google-maps)
+
+Custom components can apply the same base styles as `ReactCompareSliderImage` 
+by using the [`styleFitContainer` CSS utility](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page#stylefitcontainer).
 
 ### Custom Handles
 
 [![Custom Handles](./example/custom-handle-capture.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 
-See the [Handles docs](https://react-compare-slider.netlify.app/?path=/docs/docs-handles--page) for more information.
+See the [Handles docs](https://react-compare-slider.vercel.app/?path=/docs/docs-handles--page) for more information.
 
 ## Requirements
 

diff --git a/docs/00-intro.story.mdx b/docs/00-intro.story.mdx
@@ -8,153 +8,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # React Compare Slider
 
-```js codesandbox=react-compare-slider
-/** @jsx jsx */
-import { useCallback } from "react";
-import { jsx, css } from "@emotion/core";
-
-// -- demo start --
-
-/**
- * @see https://github.com/nerdyman/react-compare-slider
- */
-
-import {
-  ReactCompareSlider,
-  ReactCompareSliderImage
-} from "react-compare-slider";
-
-/** In `portrait` mode */
-const Portrait = props => {
-  const handlePositionChange = useCallback(
-    position => console.log("[CustomHandle]", position),
-    []
-  );
-
-  return (
-    <ReactCompareSlider
-      {...props}
-      itemOne={
-        <ReactCompareSliderImage
-          src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1500&q=80"
-          style={{ filter: "grayscale(1)" }}
-          alt="one"
-        />
-      }
-      itemTwo={
-        <ReactCompareSliderImage
-          src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1500&q=80"
-          alt="two"
-        />
-      }
-      onPositionChange={handlePositionChange}
-      portrait
-      style={{
-        display: "flex",
-        width: "100%",
-        height: "50vh"
-      }}
-    />
-  );
-};
-
-/** With Custom `handle` using Emotion's `css` prop */
-const CustomHandle = props => {
-  const handlePositionChange = useCallback(
-    position => console.log("[Portrait]", position),
-    []
-  );
-
-  return (
-    <ReactCompareSlider
-      {...props}
-      handle={
-        <div
-          css={css`
-            --rcs-handle-width: 0.1rem;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: var(--rcs-handle-width);
-            height: 100%;
-            box-shadow: none;
-            background-color: #ffffff;
-
-            &::before {
-              content: "";
-              position: absolute;
-              top: 50%;
-              left: calc(var(--rcs-handle-width) / 2);
-              width: 3.5rem;
-              height: 3.5rem;
-              border: var(--rcs-handle-width) solid #ffffff;
-              border-radius: 100%;
-              transform: translate(-50%, -50%);
-              backdrop-filter: blur(0.5rem);
-            }
-          `}
-        >
-          {/* Arrows */}
-          <div
-            css={css`
-              position: relative;
-              display: grid;
-              grid-auto-flow: column;
-              gap: 0.65rem;
-
-              &::before,
-              &::after {
-                content: "";
-                display: block;
-                width: 0;
-                height: 0;
-                top: 50%;
-                left: 0;
-                border-top: 0.5rem solid transparent;
-                border-bottom: 0.5rem solid transparent;
-              }
-
-              &::before {
-                border-right: 0.65rem solid #ffffff;
-              }
-
-              &::after {
-                border-left: 0.65rem solid #ffffff;
-              }
-            `}
-          />
-        </div>
-      }
-      itemOne={
-        <ReactCompareSliderImage
-          src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1280&q=80"
-          style={{ filter: "grayscale(1)" }}
-          alt="one"
-        />
-      }
-      itemTwo={
-        <ReactCompareSliderImage
-          src="https://images.unsplash.com/photo-1580458148391-8c4951dc1465?auto=format&fit=crop&w=1280&q=80"
-          alt="two"
-        />
-      }
-      onPositionChange={handlePositionChange}
-      style={{
-        display: "flex",
-        width: "100%",
-        height: "50vh"
-      }}
-    />
-  );
-};
-
-export const App = () => (
-  <div>
-    <Portrait />
-    <CustomHandle position={25} />
-  </div>
-);
+```js codesandbox=react-compare-slider-simple-example-9si6l?file=/src/App.jsx&overrideEntry=false
 ```
 
 <br/>
@@ -182,8 +36,8 @@ export const App = () => (
     <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" />
 </a>
 &nbsp;
-<a href="https://react-compare-slider.netlify.app/">
-    <img src="https://img.shields.io/badge/demos-🚀-blue.svg" alt="Demos" />
+<a href="https://github.com/nerdyman/react-compare-slider">
+    <img src="https://img.shields.io/badge/🐙-source-blue.svg" alt="Demos" />
 </a>
 
 

diff --git a/docs/02-images.story.mdx b/docs/02-images.story.mdx
@@ -2,9 +2,7 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
-import { Images } from './demos/00-props.story';
-
-<Meta title="Docs/Images" component={ReactCompareSlider} argTypes={Images.args} />
+<Meta title="Docs/Images" component={ReactCompareSlider} />
 
 # Using Images