Finish project rename

wilgaboury · Oct 20, 2024 · df55ce3 · df55ce3
1 parent 53267d7
commit df55ce3
Show file tree

Hide file tree

Showing 11 changed files with 2,712 additions and 3,483 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 <p>
-  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-sortable&background=tiles&project=%20" alt="solid-sortable">
+  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-drag-list&background=tiles&project=%20" alt="solid-drag-list">
 </p>
 
-# solid-sortable
+# solid-drag-list
 
 [![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
 
@@ -15,17 +15,17 @@ currently undergoing rapid development, so I wouldn't reccomend using it for pro
 <!-- Install it:
 
 ```bash
-npm i solid-sortable
+npm i solid-drag-list
 # or
-yarn add solid-sortable
+yarn add solid-drag-list
 # or
-pnpm add solid-sortable
+pnpm add solid-drag-list
 ``` -->
 
 Use it:
 
 ```ts
-import { Sortable } from "solid-sortable";
+import { DragList } from "solid-drag-list";
 ```
 
 Add to project to use drag handle directive in typescript:
@@ -34,7 +34,7 @@ Add to project to use drag handle directive in typescript:
 declare module "solid-js" {
   namespace JSX {
     interface Directives {
-      sortableHandle: boolean;
+      dragHandle: boolean;
     }
   }
 }

diff --git a/dev/Grid.tsx b/dev/Grid.tsx
@@ -1,15 +1,15 @@
 import { Component, createSignal } from "solid-js";
 
 import {
-  createSortableGroupContext,
+  createDragListGroupContext,
   defaultMutationEventListeners,
-  Sortable,
-  SortableGroupContext,
-  sortableHandle,
+  DragList,
+  DragListGroupContext,
+  dragHandle,
   easeOutCirc,
 } from "../src";
 
-sortableHandle;
+dragHandle;
 
 export function randomColor() {
   var letters = "0123456789ABCDEF";
@@ -20,7 +20,7 @@ export function randomColor() {
   return color;
 }
 
-const ExampleGroupContext = createSortableGroupContext<number>();
+const ExampleGroupContext = createDragListGroupContext<number>();
 
 const N = 5;
 
@@ -85,7 +85,7 @@ export const GridPage: Component = () => {
           gap: "40px",
         }}
       >
-        <SortableGroupContext
+        <DragListGroupContext
           context={ExampleGroupContext}
           animated={elements().length <= 200}
           animationDurationMs={250}
@@ -107,7 +107,7 @@ export const GridPage: Component = () => {
               >
                 {item}
                 <div
-                  use:sortableHandle
+                  use:dragHandle
                   style={{
                     position: "absolute",
                     height: "15px",
@@ -119,7 +119,7 @@ export const GridPage: Component = () => {
                   }}
                 />
                 <div
-                  use:sortableHandle
+                  use:dragHandle
                   style={{
                     position: "absolute",
                     height: "15px",
@@ -149,7 +149,7 @@ export const GridPage: Component = () => {
               "background-color": "lightblue",
             }}
           >
-            <Sortable
+            <DragList
               group={ExampleGroupContext}
               each={elements()}
               {...defaultMutationEventListeners(setElements)}
@@ -170,7 +170,7 @@ export const GridPage: Component = () => {
               "background-color": "lightblue",
             }}
           >
-            <Sortable
+            <DragList
               group={ExampleGroupContext}
               each={elements2()}
               {...defaultMutationEventListeners(setElements2)}
@@ -191,7 +191,7 @@ export const GridPage: Component = () => {
               "background-color": "lightblue",
             }}
           >
-            <Sortable
+            <DragList
               group={ExampleGroupContext}
               each={elements3()}
               {...defaultMutationEventListeners(setElements3)}
@@ -214,9 +214,9 @@ export const GridPage: Component = () => {
                   </div>
                 );
               }}
-            </Sortable>
+            </DragList>
           </div>
-        </SortableGroupContext>
+        </DragListGroupContext>
       </div>
     </div>
   );

diff --git a/dev/SimpleGridTest.tsx b/dev/SimpleGridTest.tsx
@@ -1,4 +1,4 @@
-import { createSortableAnimationController } from "../src/animation";
+import { createAnimationController } from "../src/animation";
 import { randomColor } from "./Grid";
 import { onMount } from "solid-js";
 
@@ -16,7 +16,7 @@ export function SimpleGridTest() {
       {Array.from(Array(20).keys()).map(() => {
         let ref!: HTMLDivElement;
         onMount(() => {
-          createSortableAnimationController(ref);
+          createAnimationController(ref);
         });
         return (
           <div

diff --git a/dev/index.tsx b/dev/index.tsx
@@ -6,7 +6,7 @@ import { SimpleGridTest } from "./SimpleGridTest";
 declare module "solid-js" {
   namespace JSX {
     interface Directives {
-      sortableHandle: boolean;
+      dragHandle: boolean;
     }
   }
 }

diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
-  "name": "solid-sortable",
+  "name": "solid-drag-list",
   "version": "0.1.0",
   "description": "reactive drag and drop lists",
   "license": "MIT",
   "author": "Wil Gaboury",
   "contributors": [],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wilgaboury/solid-sortable.git"
+    "url": "git+https://github.com/wilgaboury/solid-drag-list.git"
   },
-  "homepage": "https://github.com/wilgaboury/solid-sortable#readme",
+  "homepage": "https://github.com/wilgaboury/solid-drag-list#readme",
   "bugs": {
-    "url": "https://github.com/wilgaboury/solid-sortable/issues"
+    "url": "https://github.com/wilgaboury/solid-drag-list/issues"
   },
   "files": [
     "dist"