Added basic docs

Author: mfoulks3200

.gitignore

@@ -10,7 +10,7 @@
 
 # production
 /dist
-/docs-dist
+/docs/dist
 
 # misc
 .DS_Store

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.prettierrc

@@ -1,11 +1,14 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
+  "singleAttributePerLine": true,
   "printWidth": 200,
   "overrides": [
     {
       "files": ".prettierrc",
-      "options": { "parser": "json" }
+      "options": {
+        "parser": "json"
+      }
     }
   ]
-}
+}

docs/footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Footer() {
+  return (
+    <div>
+      <div>Released under the MIT License.</div>
+    </div>
+  );
+}

docs/pages/docs/get-started.mdx

@@ -0,0 +1,57 @@
+---
+title: Get Started
+description: Installation and Basic Usage
+---
+
+## Installation
+
+To get started, install the package from npm using your package manager of choice.
+
+:::code-group
+
+```bash [npm]
+npm install @mfoulks3200/react-timeline-editor
+```
+
+```bash [bun]
+bun install @mfoulks3200/react-timeline-editor
+```
+
+```bash [yarn]
+yarn add @mfoulks3200/react-timeline-editor
+```
+
+```bash [pnpm]
+pnpm install @mfoulks3200/react-timeline-editor
+```
+
+:::
+
+## Basic Usage
+
+import { TimelineEditor } from '../../snippets/BasicTimelinePreview.tsx';
+
+:::code-group
+ 
+<div data-title="Preview">
+    <div style={{
+        width: 'calc( 100% + 44px )',
+        height: '200px',
+        marginLeft: "-22px",
+        marginTop: "-20px",
+        marginBottom: "-20px",
+        overflow: "hidden"
+    }}>
+        <TimelineEditor />
+    </div>
+</div>
+ 
+```tsx [example.tsx]
+// [!include ~/snippets/BasicTimelinePreview.tsx] 
+```
+
+```ts [mock-data.ts]
+// [!include ~/../src/mock-data.ts] 
+```
+ 
+:::

docs/pages/index.mdx

@@ -1,3 +1,18 @@
-# Hello, World! [This is my first page]
+---
+title: Introduction
+description: What is React Timeline Editor?
+---
 
-Welcome to my docs.
+# React Timeline Editor
+
+`react-timeline-editor` Is a component developed based on react and used to quickly build timeline editing capabilities.
+
+It can be mainly used to build animation editors, video editors, etc.
+
+## Features
+
+- 🛠 Supports drag and drop, zoom mode, and provides convenient control hooks.
+- 🔗 Provides interactive capabilities such as grid adsorption and auxiliary line adsorption.
+- 🏷 Automatically identify action length and scroll infinitely.
+- 🎨 Customizable styles quickly and easily.
+- 📡 Provides a strongly decoupled runner capability that can run independently from the editor.

docs/snippets/BasicTimelinePreview.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { MockRowData, MockEffectData } from '../../src/mock-data';
+import { Timeline } from '../../src/components/timeline';
+
+export const TimelineEditor = () => {
+  const [data, setData] = useState(MockRowData);
+
+  return (
+    <Timeline
+      style={{ width: '100%', height: '100%' }}
+      onChange={setData}
+      editorData={data}
+      effects={MockEffectData}
+      hideCursor={false}
+      autoScroll={true}
+    />
+  );
+};

package.json

@@ -24,14 +24,11 @@
     "url": "git+https://github.com/mfoulks3200/react-timeline-editor.git"
   },
   "scripts": {
-    "start": "dumi dev",
-    "legacydocs:build": "dumi build",
     "docs:dev": "vocs dev",
     "docs:build": "vocs build",
     "docs:preview": "vocs preview",
     "docs:deploy": "",
-    "build": "father-build",
-    "build:rollup": "rm -rf ./dist && rollup --config rollup.config.mjs",
+    "build": "rm -rf ./dist && rollup --config rollup.config.mjs",
     "deploy": "npm run docs:build && npm run docs:deploy",
     "prepublishOnly": "npm run build"
   },
@@ -71,6 +68,7 @@
     "react-dom": "^18.0.2",
     "rollup": "^4.35.0",
     "rollup-plugin-less": "^1.1.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "yorkie": "^2.0.0"
   }
-}
+}

rollup.build.css

@@ -95,6 +95,13 @@
   top: 0;
   transform: translate(50%, -100%);
 }
+.timeline-editor-edit-row {
+  background-repeat: no-repeat, repeat;
+  background-image: linear-gradient(#191b1d, #191b1d), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 0);
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
 .timeline-editor-drag-line-container {
   position: absolute;
   height: 100%;
@@ -108,13 +115,6 @@
   height: 99%;
   border-left: 1px dashed rgba(82, 151, 255, 0.6);
 }
-.timeline-editor-edit-row {
-  background-repeat: no-repeat, repeat;
-  background-image: linear-gradient(#191b1d, #191b1d), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 0);
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-}
 .timeline-editor-action {
   position: absolute;
   left: 0;

src/index.tsx

@@ -1,4 +1,4 @@
 export * from './components/timeline';
 export * from './interface/timeline';
-export * from './engine/engine'
-
+export * from './engine/engine';
+export * from './mock-data';