docs: finalize migration of docs by removing the old ones

Author: simonwep

.github/CONTRIBUTING.md

@@ -1,22 +1,23 @@
 ## Contribution Guidelines
 
-### Issue
+### Opening an issue
 
 * Make sure you're using the latest version, check [releases](https://github.com/simonwep/viselect/releases/tag/2.1.2) for that.
 * [Use the search](https://github.com/simonwep/viselect/search?type=Issues), maybe there is already an answer.
 * If not found, [create an issue](https://github.com/simonwep/viselect/issues/new), please don't forget to carefully describe it how to reproduce it / pay attention to the issue-template.
 
 ***
 
-### Pull Request
+### Opening a pull request
 
 * Pull requests only into the [master](https://github.com/simonwep/viselect/tree/master) branch.
+* Run `pnpm test:ci` before opening a pull request to verify that everything is working as expected.
 * Make sure to use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/):
-    - `docs: ` - for changes in the documentation.
-    - `feat([package]): ` - for new features in the corresponding package.
-    - `fix([package]): ` - for bug fixes in the corresponding package.
-    - `refactor([package]): ` - for changes in the code that neither fixes a bug nor adds a feature.
-    - `chore: ` - for changes in the build process or auxiliary tools.
+  - `docs: ` - for changes in the documentation.
+  - `feat([package]): ` - for new features in the corresponding package.
+  - `fix([package]): ` - for bug fixes in the corresponding package.
+  - `refactor([package]): ` - for changes in the code that neither fixes a bug nor adds a feature.
+  - `chore: ` - for changes in the build process or auxiliary tools.
 
 ***
 
@@ -27,9 +28,12 @@ This project requires [pnpm](https://pnpm.io) and [node](https://nodejs.org/en/)
 1. Fork this repo on [GitHub](https://github.com/simonwep/viselect).
 2. Check out the master locally.
 3. From your local repro run `pnpm install`.
-4. Run `pnpm start dev` to start a dev server for all packages.
+4. Run `pnpm dev` to start a dev server for all packages.
+5. Make sure to run `pnpm test:ci` before opening a pull request, to verify that everything is working as expected.
 
-#### Working on the docs
+***
+
+### Working on the docs
 
 This project uses [vitepress](https://vitepress.dev/) for the documentation.
 Use the `docs:` commands to work on the documentation.

.github/FUNDING.yml

@@ -1,3 +1,3 @@
-github: Simonwep
+github: simonwep
 patreon: simonwep
 custom: ["paypal.me/simonreinisch", "buymeacoffee.com/aVc3krbXQ"]

README.md

@@ -1,5 +1,5 @@
 <h3 align="center">
-    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="400"/>
+    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="350"/>
 </h3>
 
 <h3 align="center">
@@ -19,9 +19,12 @@
     <a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
         alt="Buy me a coffee"
         src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
-    <a href="https://github.com/simonwep/viselect/actions?query=workflow%3ACI"><img
+    <a href="https://github.com/simonwep/viselect/actions/workflows/main.yml"><img
         alt="Build Status"
-        src="https://github.com/simonwep/viselect/workflows/CI/badge.svg"></a>
+        src="https://github.com/simonwep/viselect/actions/workflows/main.yml/badge.svg"></a>
+    <a href="https://github.com/simonwep/viselect/actions/workflows/deploy.yml"><img
+        alt="Docs"
+        src="https://github.com/simonwep/viselect/actions/workflows/deploy.yml/badge.svg"></a>
     <img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=gzip">
     <img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.umd.js?compression=brotli">
     <a href="https://v3.vuejs.org"><img
@@ -33,9 +36,6 @@
     <a href="https://reactjs.org"><img
         alt="React support"
         src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
-    <a href="https://svelte.dev"><img
-        alt="Svelte support"
-        src="https://img.shields.io/badge/%E2%9A%99-svelte-%23F83C00"></a>
 </p>
 
 ### Features 🤘
@@ -47,56 +47,11 @@
 * ✔ Zero dependencies
 * 📱 Mobile / touch support
 * 🖱 Vertical and horizontal scroll support
-* 💪 Hardened (over 3 years old and used in many apps)
+* 💪 Battle tested (over 6 years old and used in many apps)
 
 ### Getting started
 
-> [!NOTE]
-> I'm currently in the middle of moving the migration from readmes to a new docs websites.
-> Stay tuned for a better, more detailed documentation in the coming weeks!
-
-Check out the documentation for the package you want to use:
-
-* [@viselect/vanilla](packages/vanilla) - To be used with plain [JavaScript](http://vanilla-js.com/) or [TypeScript](https://www.typescriptlang.org/).
-* [@viselect/preact](packages/preact) - [Preact](https://preactjs.com/) wrapper.
-* [@viselect/react](packages/react) - [React](https://reactjs.org/) wrapper.
-* [@viselect/vue](packages/vue)  - [Vue3](https://v3.vuejs.org/) wrapper.
-
-> Check out [recipes](packages/vanilla/recipes.md) for commonly asked questions and how to solve them using the standard library!
-> For information about events and more check out the [vanilla readme](packages/vanilla/README.md)!
-
-### Browser support
-
-This library will always produce an ESNext bundle.
-If you want to support legacy browsers, please use the feature of your bundler to transpile dependencies.
-In case of webpack and babel (give [vite](https://vitejs.dev/) a try, it's awesome) you'll have to install corresponding plugins such as [babel-plugin-proposal-optional-chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) and include the dependency from `node_modules` which is normally entirely excluded from being processed.
-
-I do this to provide maximum flexibility and give those who target ESNext a chance to make full use of how this library is bundled.
-Everything else is just a matter of configuration :)
-
-### Is this library the right choice for me?
-
-Viselect primarily focuses on being a high-performant engine to select elements with various boundaries, behaviors, and modes in your browser.
-Viselect is to "full-blown libraries" what is [popper.js](https://popper.js.org/) to [tippy.js](https://atomiks.github.io/tippyjs/) - the _core_ of your feature.
-
-### Development
-
-Use the following commands to work on this locally (we use [lerna](https://lerna.js.org/) to manage this):
-
-* `npm run dev` _- Spawns a dev-server for all packages. Every framework-dependent package is bundled with the vanilla version._
-* `npm run build` _- Builds all packages in parallel._
-* `npm run lint:fix` _- Lints and fixes all errors in all packages._
-
-For the development servers [vite](https://vitejs.dev/) is used. It's superb, you should give it a try.
-To bundle it, we use [rollup](https://rollupjs.org/) (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.
-
-### Releasing a new version
-
-This project is managed via [lerna](https://lerna.js.org/).
-To bump the version and publish a new one run the following commands:
-
-* `lerna version`
-* `lerna publish from-package`
+Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀
 
 ### You want to contribute?
 

packages/preact/README.md

@@ -45,86 +45,6 @@
 
 <br>
 
-> [!NOTE]
-> This is merely a convenience wrapper around [@viselect/vanilla](https://github.com/simonwep/viselect/tree/master/packages/vanilla).
-> The core API is fairly simple, if you want to have full control over it, you should roll out your own wrapper in your app.
+### Getting started
 
-### Installation
-
-Install using your package manager of choice:
-
-```
-npm install @viselect/preact
-```
-
-Last but not least, you'll need to add some basic styles to make your selection-area visible:
-
-```css
-.selection-area {
-    background: rgba(46, 115, 252, 0.11);
-    border: 2px solid rgba(98, 155, 255, 0.81);
-    border-radius: 0.1em;
-}
-```
-
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
-This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/simonwep/viselect/pull/99), reported in [#103](https://github.com/simonwep/viselect/issues/103)).
-If you don't care about text-selection, add the following to the container where all your selectables are located:
-
-```css
-.container {
-    user-select: none;
-}
-```
-
-### Usage
-
-> [!NOTE]
-> All options are exposed as props.
-> They're a one-to-one mapping of the original options found in the [vanilla](../vanilla#configuration) version!
-
-```tsx
-import {SelectionArea, SelectionEvent} from '@viselect/preact';
-import {FunctionalComponent} from 'preact';
-import {useState} from 'preact/hooks';
-
-const App: FunctionComponent = () => {
-    const [selected, setSelected] = useState<Set<number>>(() => new Set());
-
-    const extractIds = (els: Element[]): number[] =>
-        els.map(v => v.getAttribute('data-key'))
-            .filter(Boolean)
-            .map(Number);
-
-    const onStart = ({event, selection}: SelectionEvent) => {
-        if (!event?.ctrlKey && !event?.metaKey) {
-            selection.clearSelection();
-            setSelected(() => new Set());
-        }
-    };
-
-    const onMove = ({store: {changed: {added, removed}}}: SelectionEvent) => {
-        setSelected(prev => {
-            const next = new Set(prev);
-            extractIds(added).forEach(id => next.add(id));
-            extractIds(removed).forEach(id => next.delete(id));
-            return next;
-        });
-    };
-
-    return (
-        <>
-            <SelectionArea className="container"
-                           onStart={onStart}
-                           onMove={onMove}
-                           selectables=".selectable">
-                {new Array(42).fill(0).map((_, index) => (
-                    <div className={selected.has(index) ? 'selected selectable' : 'selectable'}
-                         data-key={index}
-                         key={index}/>
-                ))}
-            </SelectionArea>
-        </>
-    );
-}
-```
+Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀

packages/react/README.md

@@ -45,88 +45,6 @@
 
 <br>
 
-> [!NOTE]
-> This is merely a convenience wrapper around [@viselect/vanilla](https://github.com/simonwep/viselect/tree/master/packages/vanilla).
-> The core API is fairly simple, if you want to have full control over it, you should roll out your own wrapper in your app.
+### Getting started
 
-### Installation
-
-Install using your package manager of choice:
-
-```
-npm install @viselect/react
-```
-
-> If you're (still) using CRA, you may run into issues while using the bundle provided.
-> See [this comment](https://github.com/facebook/create-react-app/issues/8445#issuecomment-588545858) for how to fix it.
-
-Last but not least, you'll need to add some basic styles to make your selection-area visible:
-
-```css
-.selection-area {
-    background: rgba(46, 115, 252, 0.11);
-    border: 2px solid rgba(98, 155, 255, 0.81);
-    border-radius: 0.1em;
-}
-```
-
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
-This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/simonwep/viselect/pull/99), reported in [#103](https://github.com/simonwep/viselect/issues/103)).
-If you don't care about text-selection, add the following to the container where all your selectables are located:
-
-```css
-.container {
-    user-select: none;
-}
-```
-
-### Usage
-
-> [!NOTE]
-> All options are exposed as props.
-> They're a one-to-one mapping of the original options found in the [vanilla](../vanilla#configuration) version!
-
-```tsx
-import {SelectionArea, SelectionEvent} from '@viselect/react';
-import React, {FunctionComponent, useState} from 'react';
-
-const App: FunctionComponent = () => {
-    const [selected, setSelected] = useState<Set<number>>(() => new Set());
-
-    const extractIds = (els: Element[]): number[] =>
-        els.map(v => v.getAttribute('data-key'))
-            .filter(Boolean)
-            .map(Number);
-
-    const onStart = ({event, selection}: SelectionEvent) => {
-        if (!event?.ctrlKey && !event?.metaKey) {
-            selection.clearSelection();
-            setSelected(() => new Set());
-        }
-    };
-
-    const onMove = ({store: {changed: {added, removed}}}: SelectionEvent) => {
-        setSelected(prev => {
-            const next = new Set(prev);
-            extractIds(added).forEach(id => next.add(id));
-            extractIds(removed).forEach(id => next.delete(id));
-            return next;
-        });
-    };
-
-    return (
-        <>
-            <SelectionArea className="container"
-                           onStart={onStart}
-                           onMove={onMove}
-                           selectables=".selectable">
-                {new Array(42).fill(0).map((_, index) => (
-                    <div className={selected.has(index) ? 'selected selectable' : 'selectable'}
-                         data-key={index}
-                         key={index}/>
-                ))}
-            </SelectionArea>
-        </>
-    );
-}
-```
+Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀