Skip to content

Commit

Permalink
build: upgrade all deps and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
nerdyman committed Apr 7, 2023
1 parent 9945769 commit 75dc75f
Show file tree
Hide file tree
Showing 52 changed files with 3,733 additions and 9,415 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ coverage/
pnpm-lock.yaml
storybook-static/
.next/
docs/storybook/src
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ coverage/
pnpm-lock.yaml
storybook-static/
.next/
docs/storybook/src
64 changes: 29 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@

[![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/master/LICENSE">
<img src="https://img.shields.io/npm/l/react-compare-slider.svg" alt="License MIT" />
<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 src="https://img.shields.io/npm/v/react-compare-slider.svg" alt="NPM package" />
<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 src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" alt="Bundle size" />
<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 src="https://github.com/nerdyman/react-compare-slider/actions/workflows/ci.yml/badge.svg" alt="Build Status" />
</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" />
<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>
<a href="https://react-compare-slider.vercel.app">
<img src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" alt="Demos" />
<img alt="Demos" src="https://raw.githubusercontent.com/storybookjs/brand/8d28584c89959d7075c237e9345955c895048977/badge/badge-storybook.svg" />
</a>

</div>
Expand All @@ -32,18 +32,18 @@

- Supports responsive images and any other React components (`picture`, `video`, `canvas`, `iframe` etc.)
- Supports landscape and portrait orientations
- Accessible &ndash; includes screen reader and keyboard support
- Accessible &ndash; screen reader and keyboard support out of the box
- Simple API
- Unopinionated & fully customizable &ndash; optionally use your own components and styles
- Responsive, intrinsic sizing
- [Teeny-tiny](https://bundlephobia.com/result?p=react-compare-slider), zero dependencies
- Responsive & fluid with intrinsic sizing
- Teeny-tiny, zero dependencies
- Type safe

## Demo

- Storybook: [docs](https://react-compare-slider.vercel.app/?path=/docs/docs-intro--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)
- CodeSandbox: [basic editable demo](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l)
- [Local example](./example)
- [Local example](./docs)

## Usage

Expand All @@ -54,7 +54,7 @@ npm install react-compare-slider
# or
yarn add react-compare-slider
# or
pnpm install react-compare-slider
pnpm add react-compare-slider
```

### Basic Image Usage
Expand All @@ -79,34 +79,28 @@ See the [Images docs](https://react-compare-slider.vercel.app/?path=/docs/docs-i

## Props

| Prop | Type | Required | Default value | Description |
| ------------------------------------------------------------------------------------------------------------------- | ----------- | :------: | ------------- | ----------------------------------------------------------------------------------------------------- |
| [`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). |
| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` | | `false` | Whether the slider should follow the pointer on hover. |
| [`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. |
| `keyboardIncrement` | `number` | | `20` | How many pixels to move when the slider handle is focused and keyboard arrow is pressed. |
| [`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`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change) | `function` | | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. |
| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position) | `number` | | `50` | Initial percentage position of divide (`0-100`). |
| Prop | Type | Required | Default | Description |
| ---- | ---- | :------: | ------- | ----------- |
| [`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). |
| [`changePositionOnHover`](https://react-compare-slider.vercel.app/?path=/story/docs-change-position-on-hover--page) | `boolean` | | `false` | Whether the slider should follow the pointer on hover. |
| [`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. |
| [`keyboardIncrement`](https://react-compare-slider.vercel.app/?path=/story/docs-keyboard-increment--page) | `` number\|`${number}%` `` | | `5%` | Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed. |
| [`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`](https://react-compare-slider.vercel.app/?path=/story/demos--on-position-change) | `function` | | `undefined` | Callback on position change, returns current position percentage as argument `(position) => { ... }`. |
| [`portrait`](https://react-compare-slider.vercel.app/?path=/story/demos--portrait) | `boolean` | | `false` | Whether to use portrait orientation. |
| [`position`](https://react-compare-slider.vercel.app/?path=/story/demos--position) | `number` | | `50` | Initial percentage position of divide (`0-100`). |

See the [API docs](https://react-compare-slider.vercel.app/?path=/docs/docs-api--page) for more information.

<br />

## Extending

- [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](https://react-compare-slider.vercel.app/?path=/docs/docs-handles--page)

## 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)
- [RemoveBG](https://www.removebg.dev/)
- [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)

Expand Down
4 changes: 2 additions & 2 deletions docs/example/.eslintrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"root": false,
"extends": ["../../.eslintrc"],
"extends": "../../.eslintrc",
"rules": {
"no-console": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"react/react-in-jsx-scope": 0
}
Expand Down
54 changes: 21 additions & 33 deletions docs/example/.gitignore
Original file line number Diff line number Diff line change
@@ -1,36 +1,24 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
41 changes: 0 additions & 41 deletions docs/example/README.md

This file was deleted.

13 changes: 13 additions & 0 deletions docs/example/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
8 changes: 0 additions & 8 deletions docs/example/next.config.js

This file was deleted.

28 changes: 15 additions & 13 deletions docs/example/package.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
{
"name": "@this/example",
"version": "0.1.0",
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"next": "13.0.4",
"react": "^18.2.0",
"react-compare-slider": "latest",
"react-dom": "^18.2.0",
"typescript": "4.9.3"
"react-compare-slider": "*",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^5.0.3",
"vite": "^4.2.0"
}
}
7 changes: 0 additions & 7 deletions docs/example/pages/_app.tsx

This file was deleted.

10 changes: 0 additions & 10 deletions docs/example/pages/api/hello.ts

This file was deleted.

30 changes: 9 additions & 21 deletions docs/example/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,13 @@
import Head from 'next/head';
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
import React from 'react';
import { ReactCompareSlider } from 'react-compare-slider';

export default function Home() {
function Page(): JSX.Element {
return (
<>
<Head>
<title>React Compare Slider SSR Example</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>

<main>
<ReactCompareSlider
itemOne={
<ReactCompareSliderImage src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/e2e-test-1.png" />
}
itemTwo={
<ReactCompareSliderImage src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/e2e-test-2.png" />
}
/>
</main>
</>
<div style={{ display: 'grid' }}>
<ReactCompareSlider />
<ReactCompareSlider />
</div>
);
}

export { Page };
Binary file removed docs/example/public/favicon.ico
Binary file not shown.
8 changes: 0 additions & 8 deletions docs/example/public/vercel.svg

This file was deleted.

1 change: 1 addition & 0 deletions docs/example/public/vite.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docs/example/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
html,
body,
#root {
display: flex;
width: 100%;
height: 100%;
min-height: 100%;
}
21 changes: 21 additions & 0 deletions docs/example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ReactCompareSlider } from 'react-compare-slider';

import './App.css';

function App() {
return (
<div style={{ width: '100%', height: '100%', flexGrow: 1 }}>
<ReactCompareSlider
itemOne={<img src="https://picsum.photos/800/600" />}
itemTwo={<img src="https://picsum.photos/800/600" />}
/>
<ReactCompareSlider
portrait
itemOne={<img src="https://picsum.photos/800/600" />}
itemTwo={<img src="https://picsum.photos/800/600" />}
/>
</div>
);
}

export default App;

0 comments on commit 75dc75f

Please sign in to comment.