add solid-js example

TahaSh · Aug 23, 2024 · 4dc0e1b · 4dc0e1b
1 parent 0275c34
commit 4dc0e1b
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 0 deletions.
diff --git a/examples/solid/App.tsx b/examples/solid/App.tsx
@@ -0,0 +1,89 @@
+/** @jsxImportSource solid-js (This line overrides `jsx` and `jsxImportSource` in tsconfig.json: https://docs.astro.build/en/guides/typescript/) */
+
+import { onMount } from 'solid-js'
+import './style.css'
+import { createSwapy } from '../../src/index'
+
+const DEFAULT = {
+  '1': 'a',
+  '3': 'c',
+  '4': 'd',
+  '2': null
+}
+
+
+function A() {
+  return (
+    <>
+      <div class="item a" data-swapy-item="a">
+        <div class="handle" data-swapy-handle></div>
+        <div>A</div>
+      </div>
+    </>
+  )
+}
+
+function C() {
+  return (
+    <>
+      <div class="item c" data-swapy-item="c">
+        <div>C</div>
+      </div>
+    </>
+  )
+}
+
+function D() {
+  return (
+    <>
+      <div class="item d" data-swapy-item="d">
+        <div>D</div>
+      </div>
+    </>
+  )
+}
+
+function getItemById(itemId: 'a' | 'c' | 'd' | null) {
+  switch (itemId) {
+    case 'a':
+      return <A />
+    case 'c':
+      return <C />
+    case 'd':
+      return <D />
+  }
+}
+
+
+function App() {
+  const slotItems: Record<string, 'a' | 'c' | 'd' | null> = localStorage.getItem('slotItem') ? JSON.parse(localStorage.getItem('slotItem')!) : DEFAULT
+  onMount(() => {
+    const container = document.querySelector('.container')!
+    const swapy = createSwapy(container)
+    swapy.onSwap(({ data }) => {
+      localStorage.setItem('slotItem', JSON.stringify(data.object))
+    })
+  })
+  return (
+    <>
+      <div class="container">
+        <div class="slot a" data-swapy-slot="1">
+          {getItemById(slotItems['1'])}
+        </div>
+        <div class="second-row">
+          <div class="slot b" data-swapy-slot="2">
+            {getItemById(slotItems['2'])}
+          </div>
+          <div class="slot c" data-swapy-slot="3">
+            {getItemById(slotItems['3'])}
+          </div>
+        </div>
+        <div class="slot d" data-swapy-slot="4">
+          {getItemById(slotItems['4'])}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default App
diff --git a/examples/solid/index.html b/examples/solid/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid Swapy Example</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/main.ts b/examples/solid/main.ts
@@ -0,0 +1,10 @@
+/** @jsxImportSource solid-js (This line overrides `jsx` and `jsxImportSource` in tsconfig.json: https://docs.astro.build/en/guides/typescript/) */
+
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import App from './App'
+
+const root = document.getElementById('app')
+
+render(App, root!)
diff --git a/examples/solid/style.css b/examples/solid/style.css
@@ -0,0 +1,108 @@
+* {
+    box-sizing: border-box;
+  }
+
+  :root {
+    background: #242424;
+  }
+
+  body,
+  #app {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    width: 100%;
+    min-height: 100dvh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    width: 100%;
+    max-width: 500px;
+    padding: 10px;
+  }
+
+  .second-row {
+    display: flex;
+    gap: 5px;
+  }
+
+  .slot {
+    background: #111;
+    flex: 1;
+  }
+
+  .slot.a {
+    flex-basis: 150px;
+    height: 150px;
+  }
+
+  .slot.b {
+    flex: 2;
+  }
+
+  .second-row {
+    height: 100px;
+  }
+
+  .slot.d {
+    flex-basis: 120px;
+    height: 120px;
+  }
+
+  .item {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 40px;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    position: relative;
+  }
+
+  .item.a {
+    background: #b95050;
+  }
+
+  .item.b {
+    background: #50b97f;
+  }
+
+  .item.c {
+    background: #508db9;
+  }
+
+  .item.d {
+    background: #b95096;
+  }
+
+  [data-swapy-highlighted] {
+    background: #444;
+  }
+
+  .handle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 20px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .enable-input {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 10px;
+  }
+
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@vitejs/plugin-vue": "^5.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "solid-js": "^1.8.21",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.4",
     "typescript": "^5.5.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml