install next-playground

packages/dflex-next-playground/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["eslint-config-dflex-react"],
+};

packages/dflex-next-playground/.gitignore

@@ -0,0 +1,35 @@
+# 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
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/dflex-next-playground/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/dflex-next-playground/next.config.js

@@ -0,0 +1,54 @@
+/** @type {import('next').NextConfig} */
+// const path = require("path");
+// eslint-disable-next-line import/no-unresolved
+const webpack = require("webpack");
+
+// const moduleResolution = [
+//   {
+//     find: "@dflex/dnd",
+//     replacement: path.resolve("../dflex-dnd/src/index.ts"),
+//   },
+//   {
+//     find: "@dflex/utils",
+//     replacement: path.resolve("../dflex-utils/src/index.ts"),
+//   },
+//   {
+//     find: "@dflex/core-instance",
+//     replacement: path.resolve("../dflex-core-instance/src/index.ts"),
+//   },
+//   {
+//     find: "@dflex/draggable",
+//     replacement: path.resolve("../dflex-draggable/src/index.ts"),
+//   },
+//   {
+//     find: "@dflex/store",
+//     replacement: path.resolve("../dflex-store/src/index.ts"),
+//   },
+//   {
+//     find: "@dflex/dom-gen",
+//     replacement: path.resolve("../dflex-dom-gen/src/index.ts"),
+//   },
+// ];
+
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@dflex/dnd"],
+  devServer: {
+    port: 3002,
+  },
+  webpack: (config) => {
+    // if (!isServer) {
+    // }
+
+    // Define a custom global variable to replace _dev_
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
+      })
+    );
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;

packages/dflex-next-playground/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "dflex-next-playground",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@dflex/dnd": "workspace:^3.9.4",
+    "@types/node": "^20.3.2",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "autoprefixer": "10.4.15",
+    "classnames": "^2.3.2",
+    "next": "13.4.19",
+    "postcss": "8.4.29",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "^5.1.5"
+  },
+  "devDependencies": {
+    "eslint": "^8.43.0",
+    "eslint-config-dflex-react": "workspace:*"
+  }
+}

packages/dflex-next-playground/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/dflex-next-playground/src/components/Demo.module.css

@@ -0,0 +1,71 @@
+.root {
+  @apply flex
+  flex-wrap lg:flex-nowrap
+  items-start 
+  justify-center
+  w-full
+  bg-gray-100
+  py-6 px-3
+  rounded-xl;
+}
+
+.buttonSolo {
+  @apply px-4 py-3 text-lg lg:text-2xl font-semibold w-56 mx-auto;
+}
+
+.todo {
+  @apply flex
+  flex-col 
+  items-center 
+  justify-center
+  text-white
+  w-full lg:w-1/2;
+}
+
+.todo p {
+  cursor: pointer;
+  @apply text-center
+  text-lg text-gray-50
+  w-full lg:w-1/2
+  rounded-t-xl;
+}
+
+.todo > ul {
+  @apply rounded-lg py-1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.todo > ul > li {
+  @apply flex items-center justify-center;
+  touch-action: none;
+  cursor: pointer;
+  width: 12rem;
+  padding: 1.5rem 1.5rem;
+  margin: 0.6rem 0.6rem;
+  font-weight: 500;
+  font-size: 1rem;
+  white-space: normal;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  outline: none;
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+}
+
+.nested {
+  @apply rounded-xl py-6;
+}
+
+.nested > div {
+  @apply mb-3;
+}
+
+.extended > ul > li {
+  @apply h-5 my-2 mx-1;
+}
+
+.restricted > ul > li {
+  @apply text-base font-normal leading-none;
+}

packages/dflex-next-playground/src/components/TodoItem.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import cn from "classnames";
+import { store, DnD } from "@dflex/dnd";
+import type { DFlexDnDOpts } from "@dflex/dnd";
+
+// shared dragged event
+let draggedEvent: DnD | null;
+
+interface Props {
+  Component?: string | React.JSXElementConstructor<any>;
+  id: string;
+  style?: { [key: string]: string };
+  opts?: DFlexDnDOpts;
+  task?: string;
+  depth?: number;
+  children?: React.ReactNode;
+}
+
+export function TodoItem({
+  Component = "li",
+  id,
+  task,
+  style,
+  children,
+  opts,
+  depth = 0,
+}: Props) {
+  const taskRef = React.useRef() as React.MutableRefObject<HTMLLIElement>;
+
+  React.useEffect(() => {
+    store.register({ id, depth });
+
+    // return () => {
+    //   store.unregister(id);
+    // };
+  }, [taskRef.current]);
+
+  const onMouseMove = (e: MouseEvent) => {
+    e.stopPropagation();
+
+    if (draggedEvent) {
+      const { clientX, clientY } = e;
+
+      draggedEvent.dragAt(clientX, clientY);
+    }
+  };
+
+  const onMouseUp = () => {
+    if (draggedEvent) {
+      draggedEvent.endDragging();
+
+      draggedEvent = null;
+
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousemove", onMouseMove);
+    }
+  };
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const { button, clientX, clientY } = e;
+
+    // Avoid right mouse click and ensure id
+    if (typeof button === "number" && button === 0) {
+      if (id) {
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("mousemove", onMouseMove);
+
+        draggedEvent = new DnD(id, { x: clientX, y: clientY }, opts);
+      }
+    }
+  };
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (draggedEvent) {
+      const { clientX, clientY } = e.touches[0];
+
+      draggedEvent.dragAt(clientX, clientY);
+    }
+  };
+
+  const onTouchEnd = () => {
+    if (draggedEvent) {
+      draggedEvent.endDragging();
+
+      draggedEvent = null;
+
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("touchmove", onTouchMove);
+    }
+  };
+
+  const onTouchStart = (e: React.TouchEvent) => {
+    const { clientX, clientY } = e.touches[0];
+
+    if (id) {
+      draggedEvent = new DnD(id, { x: clientX, y: clientY }, opts);
+
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchmove", onTouchMove);
+    }
+  };
+
+  return (
+    <Component
+      ref={taskRef}
+      id={id}
+      onTouchStart={onTouchStart}
+      onMouseDown={onMouseDown}
+      style={style}
+      className={cn(
+        "border border-blue-300 bg-blue-100 rounded py-2 px-4 my-4 flex items-center justify-between",
+        [!style && "h-16"]
+      )}
+    >
+      <div>{task || children}</div>
+    </Component>
+  );
+}
+
+export default TodoItem;

packages/dflex-next-playground/src/pages/_app.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

packages/dflex-next-playground/src/pages/_document.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}