build: replace tsdx with tsup and move storybook to its own workspace, …

…closes #73

.gitignore

@@ -9,3 +9,4 @@ dist
 coverage
 *.ignore
 storybook-static
+docs/src

docs/.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "../.eslintrc",
   "rules": {
-    "no-console": 0
+    "no-console": 0,
+    "@typescript-eslint/explicit-function-return-type": 0
   }
 }

.storybook/main.ts → docs/.storybook/main.ts

@@ -1,21 +1,16 @@
-const path = require('node:path');
+import path from 'node:path';
 
-const { mergeConfig } = require('vite');
+import { mergeConfig } from 'vite';
 
-const codesandbox = require('remark-codesandbox');
-
-const storybookConfig = {
+export default {
   core: {
     builder: '@storybook/builder-vite',
   },
 
   framework: {
     name: '@storybook/react-vite',
-    options: { fastRefresh: true },
   },
 
-  csfPluginOptions: {},
-
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -27,10 +22,13 @@ const storybookConfig = {
   ],
 
   /** Files to load as stories */
-  stories: ['../docs/**/*.stories.@(mdx|tsx)'],
+  stories: ['../content/**/*.stories.@(mdx|tsx)'],
 
   async viteFinal(config) {
     return mergeConfig(config, {
+      build: {
+        sourcemap: 'inline',
+      },
       resolve: {
         alias: {
           ['react-compare-slider']: path.resolve(__dirname, '..', 'src'),
@@ -39,5 +37,3 @@ const storybookConfig = {
     });
   },
 };
-
-module.exports = storybookConfig;

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

@@ -1,5 +1,5 @@
 <script>
-   window.global = window;
+  window.global = window;
 </script>
 
 <style type="text/css">
@@ -28,9 +28,9 @@
     flex-grow: 1;
   }
 
-   /** any story **/
+  /** any story **/
 
-   #storybook-root:not([hidden="true"]) {
+  #storybook-root:not([hidden='true']) {
     display: flex !important;
     height: 100%;
   }
@@ -39,7 +39,6 @@
     max-height: 100vh !important;
   }
 
-
   /** sidebar */
 
   .sidebar-subheading,
@@ -54,15 +53,15 @@
 
   /** docs **/
 
-  .sbdocs.sbdocs-preview div[scale="1"] {
+  .sbdocs.sbdocs-preview div[scale='1'] {
     height: 100% !important;
   }
 
   .sbdocs .innerZoomElementWrapper {
     padding-bottom: 10px !important;
   }
 
-  .sbdocs.sbdocs-preview div[id^="story--"] div[data-name] > div {
+  .sbdocs.sbdocs-preview div[id^='story--'] div[data-name] > div {
     height: 100% !important;
   }
 

docs/00-intro.stories.mdx → docs/content/00-intro.stories.mdx

@@ -63,7 +63,9 @@ landscape/portrait mode, responsive images (`picture`, `img[srcset]`), videos&he
 
 ## 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 only occurs when the slider is within an iframe
+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.
 
 ---
 

docs/01-api.stories.mdx → docs/content/01-api.stories.mdx

@@ -1,6 +1,11 @@
 import { ArgsTable, Description, Meta } from '@storybook/addon-docs';
 
-import { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer } from 'react-compare-slider';
+import {
+  ReactCompareSlider, 
+  ReactCompareSliderHandle,
+  ReactCompareSliderImage,
+  styleFitContainer,
+} from 'react-compare-slider';
 
 <Meta title="Docs/API" />
 

docs/stories/00-props.stories.tsx → docs/content/stories/00-props.stories.tsx

@@ -1,5 +1,4 @@
-/* eslint no-console: 0 */
-import { Story } from '@storybook/react';
+import type { Story } from '@storybook/react';
 import React from 'react';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 

docs/stories/02-handles.stories.tsx → docs/content/stories/02-handles.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint no-console: 0 */
 import React from 'react';
 import {
   ReactCompareSlider,

docs/stories/03-custom-components.stories.tsx → docs/content/stories/03-custom-components.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint no-console: 0 */
 import { GoogleApiWrapper, Map } from 'google-maps-react';
 import React from 'react';
 import { ReactCompareSlider } from 'react-compare-slider';

docs/stories/99-e2e-tests.stories.tsx → docs/content/stories/99-e2e-tests.stories.tsx

@@ -1,15 +1,14 @@
-import { jest, expect } from '@storybook/jest';
+import { expect, jest } from '@storybook/jest';
 import type { Meta, Story } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';
 import React from 'react';
-
 import {
-  ReactCompareSlider,
   ReactCompareSliderHandle as BaseReactCompareSliderHandle,
   ReactCompareSliderImage as BaseReactCompareSliderImage,
+  ReactCompareSlider,
   ReactCompareSliderDetailedProps,
   styleFitContainer,
-} from '../../src';
+} from 'react-compare-slider';
 
 export default {
   title: 'Tests/E2E',

docs/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "docs",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React Compare Slider Documentation",
+  "keywords": [],
+  "license": "MIT",
+  "scripts": {
+    "storybook": "rm -rf ./node_modules/.cache && storybook dev -p 6006 --ci",
+    "storybook:build": "storybook build"
+  },
+  "dependencies": {
+    "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-coverage": "^0.0.5",
+    "@storybook/addon-essentials": "7.0.0-alpha.48",
+    "@storybook/addon-interactions": "7.0.0-alpha.48",
+    "@storybook/addon-links": "7.0.0-alpha.48",
+    "@storybook/addon-storysource": "7.0.0-alpha.48",
+    "@storybook/builder-vite": "7.0.0-alpha.48",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/preset-typescript": "3.0.0-alpha.1",
+    "@storybook/react": "7.0.0-alpha.48",
+    "@storybook/react-vite": "7.0.0-alpha.48",
+    "@storybook/test-runner": "0.10.0-next.1",
+    "@storybook/testing-library": "0.0.14-next.0",
+    "@storybook/theming": "7.0.0-alpha.48",
+    "react-compare-slider": "workspace:*",
+    "storybook": "7.0.0-alpha.48"
+  }
+}

package.json

@@ -29,26 +29,27 @@
   ],
   "packageManager": "pnpm@7.15.0",
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/react-compare-slider.esm.js",
+  "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "bootstrap": "corepack enable && pnpm install --frozen-lockfile",
-    "clean": "rm -rf ./node_modules ./example/node_modules",
-    "dx": "pnpm run bootstrap && pnpm install-completion",
-    "start": "tsdx watch",
-    "build": "NODE_ENV=production tsdx build",
+    "bootstrap": "corepack disable && corepack enable && pnpm install --frozen-lockfile",
+    "clean": "rm -rvf ./node_modules ./{docs,example}/node_modules",
+    "dev": "tsup --watch",
+    "dx": "npm run bootstrap && pnpm install-completion",
+    "start": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"pnpm run dev\" \"pnpm run type:check --watch\"",
+    "build": "NODE_ENV=production tsup",
     "release": "pnpm build && np --no-2fa",
     "test": "test-storybook",
     "test:coverage": "NODE_OPTIONS='--openssl-legacy-provider' pnpm test --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook",
     "test:ci": "NODE_OPTIONS='--openssl-legacy-provider' concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook:build --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && pnpm test:coverage\"",
-    "lint": "eslint . && prettier --check .",
-    "lint-staged": "lint-staged",
-    "storybook": "storybook dev -p 6006 --ci",
-    "storybook:build": "storybook build"
+    "type:check": "tsc --noEmit",
+    "lint": "concurrently -k -s first -n \"eslint,prettier\" -c \"green,magenta\" \"pnpm run lint:eslint\" \"pnpm run lint:prettier\"",
+    "lint:eslint": "eslint .",
+    "lint:prettier": "prettier --check .",
+    "lint-staged": "lint-staged"
   },
   "browserslist": {
     "production": [
@@ -86,20 +87,6 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-coverage": "^0.0.5",
-    "@storybook/addon-essentials": "7.0.0-alpha.48",
-    "@storybook/addon-interactions": "7.0.0-alpha.48",
-    "@storybook/addon-links": "7.0.0-alpha.48",
-    "@storybook/addon-storysource": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/preset-typescript": "3.0.0-alpha.1",
-    "@storybook/react": "7.0.0-alpha.48",
-    "@storybook/react-vite": "7.0.0-alpha.48",
-    "@storybook/test-runner": "0.10.0-next.1",
-    "@storybook/testing-library": "0.0.14-next.0",
-    "@storybook/theming": "7.0.0-alpha.48",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
@@ -119,12 +106,9 @@
     "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remark-codesandbox": "^0.10.1",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "storybook": "7.0.0-alpha.48",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.4.1",
-    "typescript": "^4.8.4",
+    "tslib": "~2.4.1",
+    "tsup": "^6.4.0",
+    "typescript": "4.8.4",
     "vite": "^3.2.3",
     "wait-on": "^6.0.1"
   }