Init

ductinhkzz · Sep 21, 2024 · 17ce8ad · 17ce8ad
commit 17ce8ad
Show file tree

Hide file tree

Showing 68 changed files with 8,142 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+**/node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,2 @@
+yarn lint
+yarn format
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,28 @@
+# React Dnd Tree Sortable
+
+## Introduce
+
+[dnd-tree-sortable](https://vitejs.github.io/vite-plugin-react-pages) is a React component. It is very suitable for:
+
+- Drag and Drop Tree data
+- Virtualized list to optimize performance
+- Large data
+
+## Required:
+
+- react: ^18.3.1
+- react-dom: ^18.3.1
+
+## Tech
+
+It built base on [dnd-kit-example](https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features):
+
+- **[Dnd kit](https://docs.dndkit.com/)**. A lightweight, modular, performant, accessible and extensible drag & drop toolkit for React.
+- **[virtuoso](https://virtuoso.dev/)**. is a set of React components that display large data sets using virtualized rendering. The Virtuoso components automatically handle items with variable sizes and changes in items' sizes.
+- **[rc-scrollbars](https://rc-scrollbars.vercel.app/)**.
+
+## Getting stated
+
+```(bash)
+npm i dnd-tree-sortable
+```
diff --git a/api-examples.md b/api-examples.md
@@ -0,0 +1,55 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+
+<pre>{{ theme }}</pre>
+
+### Page Data
+
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+
+<pre>{{ theme }}</pre>
+
+### Page Data
+
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dnd Tree Sortable</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@pages-infra/main.js"></script>
+  </body>
+</html>
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "docs",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module"
+}
diff --git a/docs/pages/$.mdx b/docs/pages/$.mdx
@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+import README from '../../README.md';
+
+<README />
diff --git a/docs/pages/404.tsx b/docs/pages/404.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+const Component404 = () => {
+  return <Navigate to='/' replace />;
+};
+
+export default Component404;
diff --git a/docs/pages/_theme.tsx b/docs/pages/_theme.tsx
@@ -0,0 +1,40 @@
+import { createTheme, defaultSideNavs } from 'vite-pages-theme-doc';
+
+import Component404 from './404';
+
+export default createTheme({
+  logo: <div style={{ fontSize: '20px' }}>Dnd Tree Sortable</div>,
+  topNavs: [
+    {
+      label: 'Home',
+      path: '/',
+      activeIfMatch: {
+        // match all first-level paths
+        path: '/:foo',
+        end: true,
+      },
+    },
+    {
+      label: 'Examples',
+      path: '/examples/Basic',
+      activeIfMatch: '/examples',
+    },
+    {
+      label: 'Github',
+      href: 'https://github.com/',
+    },
+  ],
+  Component404,
+  sideNavs: (ctx) => {
+    return defaultSideNavs(ctx, {
+      groupConfig: {
+        examples: {
+          demos: {
+            label: 'Demos (dev only)',
+            order: 1,
+          },
+        },
+      },
+    });
+  },
+});
diff --git a/docs/pages/examples/Basic/$.mdx b/docs/pages/examples/Basic/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Basic
+order: 1
+---
+
+# Basic usage
+
+<Demo src='./Basic.tsx' />
diff --git a/docs/pages/examples/Basic/Basic.tsx b/docs/pages/examples/Basic/Basic.tsx
@@ -0,0 +1,9 @@
+import { SortableTree } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const Basic = () => {
+  return <SortableTree defaultItems={tree} height={600} collapsible />;
+};
+
+export default Basic;
diff --git a/docs/pages/examples/CustomComponents/$.mdx b/docs/pages/examples/CustomComponents/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Custom components
+order: 4
+---
+
+# Custom components
+
+<Demo src='./CustomComponents.tsx' />
diff --git a/docs/pages/examples/CustomComponents/CustomComponents.tsx b/docs/pages/examples/CustomComponents/CustomComponents.tsx
@@ -0,0 +1,51 @@
+import { SortableTree, ActionProps, TreeItem } from 'dnd-tree-sortable';
+
+import { classNames, tree } from '../utils';
+import styles from '../styles.module.css';
+
+const Handle = (props: ActionProps) => {
+  return (
+    <button {...props} className={classNames(styles['btn'], styles['border-none'], styles['grab'])}>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='#333'
+        width={24}
+        height={24}
+      >
+        <path
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          d='M10.05 4.575a1.575 1.575 0 1 0-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 0 1 3.15 0v1.5m-3.15 0 .075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 0 1 3.15 0V15M6.9 7.575a1.575 1.575 0 1 0-3.15 0v8.175a6.75 6.75 0 0 0 6.75 6.75h2.018a5.25 5.25 0 0 0 3.712-1.538l1.732-1.732a5.25 5.25 0 0 0 1.538-3.712l.003-2.024a.668.668 0 0 1 .198-.471 1.575 1.575 0 1 0-2.228-2.228 3.818 3.818 0 0 0-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0 1 16.35 15m.002 0h-.002'
+        />
+      </svg>
+    </button>
+  );
+};
+
+const ItemContent = (props: TreeItem) => {
+  return (
+    <div>
+      {props.id} <span style={{ color: '#1976d2' }}>({props.children.length})</span>
+    </div>
+  );
+};
+
+const CustomComponents = () => {
+  return (
+    <SortableTree
+      defaultItems={tree}
+      height={600}
+      collapsible
+      indicator
+      components={{
+        Handle,
+        ItemContent,
+      }}
+    />
+  );
+};
+
+export default CustomComponents;
diff --git a/docs/pages/examples/CustomItem/$.mdx b/docs/pages/examples/CustomItem/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Custom item
+order: 5
+---
+
+# Custom components
+
+<Demo src='./CustomItem.tsx' />
diff --git a/docs/pages/examples/CustomItem/CustomItem.tsx b/docs/pages/examples/CustomItem/CustomItem.tsx
@@ -0,0 +1,44 @@
+import { SortableTree, SortableTreeProps } from 'dnd-tree-sortable';
+
+import { tree } from '../utils';
+
+const ItemContent: SortableTreeProps<{}>['renderItemContent'] = ({
+  childCount,
+  clone,
+  depth,
+  disableSelection,
+  disableInteraction,
+  ghost,
+  handleProps,
+  indentationWidth,
+  indicator,
+  collapsed,
+  onCollapse,
+  onRemove,
+  style,
+  value,
+  components,
+  wrapperRef,
+  ...rest
+}) => {
+  return (
+    <li
+      ref={wrapperRef}
+      style={
+        {
+          '--spacing': `${indentationWidth * depth}px`,
+          paddingLeft: 'var(--spacing)',
+        } as React.CSSProperties
+      }
+      {...rest}
+    >
+      {value.id} <span style={{ color: '#1976d2' }}>({value.children.length})</span>
+    </li>
+  );
+};
+
+const CustomItem = () => {
+  return <SortableTree defaultItems={tree} height={600} collapsible indicator renderItemContent={ItemContent} />;
+};
+
+export default CustomItem;
diff --git a/docs/pages/examples/CustomItemData/$.mdx b/docs/pages/examples/CustomItemData/$.mdx
@@ -0,0 +1,8 @@
+---
+title: Custom item data
+order: 5
+---
+
+# Custom item data
+
+<Demo src='./CustomItemData.tsx' />
diff --git a/docs/pages/examples/CustomItemData/CustomItemData.tsx b/docs/pages/examples/CustomItemData/CustomItemData.tsx
@@ -0,0 +1,53 @@
+import { SortableTree, TreeItem as BaseTreeItem } from 'dnd-tree-sortable';
+
+import { getRandomInRange } from '../utils';
+
+type CustomItemType = {
+  text: string;
+};
+
+type TreeItem = BaseTreeItem<CustomItemType>;
+
+const generateTree = (childPerNode: number, deep: number, parentId: TreeItem['id'], totalRoot?: number) => {
+  const nodes: TreeItem[] = [];
+  const currDeep = parentId.toString().split('-').length;
+  if (currDeep === deep) {
+    return [];
+  }
+  for (let i = 1; i <= (totalRoot ?? childPerNode); i++) {
+    const node: TreeItem = {
+      id: `${parentId}-${i}`,
+      children: generateTree(getRandomInRange(0, childPerNode), deep, `${parentId}-${i}`),
+      text: `${parentId}-${i}`,
+    };
+    nodes.push(node);
+  }
+
+  return nodes;
+};
+
+const tree = generateTree(10, 6, 'Node', 20);
+
+const ItemContent = (props: TreeItem) => {
+  return (
+    <div>
+      {props.text} <span style={{ color: '#1976d2' }}>({props.children.length})</span>
+    </div>
+  );
+};
+
+const CustomItemData = () => {
+  return (
+    <SortableTree<CustomItemType>
+      defaultItems={tree}
+      height={600}
+      collapsible
+      indicator
+      components={{
+        ItemContent,
+      }}
+    />
+  );
+};
+
+export default CustomItemData;