@fileverse-dev/dsheet 1.0.23 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +163 -34
  2. package/package.json +1 -4
package/README.md CHANGED
@@ -1,58 +1,187 @@
1
- # Dsheet Editor
1
+ # Fileverse DSheet
2
2
 
3
- [dsheet.new](http://dsheet.new/) is your onchain, privacy-first alternative to G\**gle D*cs: peer-to-peer, end-to-end encrypted, and decentralized. It enables secure, real-time, and async collaboration without compromising user privacy.
3
+ [![NPM](https://img.shields.io/npm/v/@fileverse-dev/dsheet)](https://www.npmjs.com/package/@fileverse-dev/dsheet)
4
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
4
5
 
5
- <img width="4410" alt="github_banner_final@3x" src="./package/assets/sheet.png" />
6
+ Privacy-first, decentralized spreadsheet editor with real-time collaboration.
6
7
 
7
- This repository contains:
8
+ [**Try Live Demo →**](https://fileverse-dsheet.vercel.app/)
8
9
 
9
- - `/package` – The core package code.
10
- - Example & demo source code to showcase dSheets functionalities.
10
+ ## Installation
11
11
 
12
- ## Usage
12
+ ```bash
13
+ npm install @fileverse-dev/dsheet
14
+ ```
15
+
16
+ ## Setup
13
17
 
14
- ### Prequisites
18
+ ### 1. Import
15
19
 
16
- To use dSheet, ensure your project is set up with Tailwind CSS and have a Tailwind configuration file.
20
+ ```typescript
21
+ import DsheetEditor from '@fileverse-dev/dsheet';
22
+ import '@fileverse-dev/dsheet/styles';
23
+ ```
17
24
 
18
- ### Install & import
25
+ ### 2. Configure Tailwind
19
26
 
20
- Add the following imports :
27
+ Add to your `tailwind.config.js`:
21
28
 
22
29
  ```javascript
23
- import { DSheetEditor } from '@fileverse-dev/dsheet';
24
- import '@fileverse-dev/dsheet/styles'; // in App.jsx/App.tsx
30
+ module.exports = {
31
+ content: [
32
+ "./src/**/*.{js,jsx,ts,tsx}",
33
+ "./node_modules/@fileverse-dev/dsheet/dist/index.es.js"
34
+ ]
35
+ }
25
36
  ```
26
37
 
27
- ### Update Tailwind Config
38
+ ### 3. Basic Usage
28
39
 
29
- In your tailwind config, add this line to content array :
40
+ ```typescript
41
+ function App() {
42
+ const [data, setData] = useState({});
30
43
 
31
- `@fileverse-dev/dsheet/dist/index.es.js`
44
+ return (
45
+ <DsheetEditor
46
+ isAuthorized={true}
47
+ dsheetId="my-sheet-id"
48
+ onChange={(updateData) => setData(updateData)}
49
+ />
50
+ );
51
+ }
52
+ ```
32
53
 
33
- You should now be set to use dSheets!
54
+ ## Props Reference
55
+
56
+ ### Required Props
57
+
58
+ | Prop | Type | Description |
59
+ |------|------|-------------|
60
+ | `isAuthorized` | `boolean` | Authorization status for the user |
61
+ | `dsheetId` | `string` | Unique identifier for collaboration room |
62
+
63
+ ### Optional Props
64
+
65
+ | Prop | Type | Default | Description |
66
+ |------|------|---------|-------------|
67
+ | `onChange` | `(data: SheetUpdateData, encodedUpdate?: string) => void` | - | Callback when sheet data changes |
68
+ | `portalContent` | `string` | - | Encoded initial sheet data |
69
+ | `isReadOnly` | `boolean` | `false` | Enable read-only mode |
70
+ | `allowComments` | `boolean` | `false` | Enable comments (requires `isReadOnly=true`) |
71
+ | `username` | `string` | - | Username for collaboration |
72
+ | `isCollaborative` | `boolean` | `false` | Enable collaborative features |
73
+ | `enableWebrtc` | `boolean` | `true` | Enable WebRTC for P2P collaboration |
74
+ | `enableIndexeddbSync` | `boolean` | `true` | Enable local IndexedDB persistence |
75
+ | `isTemplateOpen` | `boolean` | - | Template sidebar state |
76
+ | `selectedTemplate` | `string` | - | Selected template identifier |
77
+ | `onboardingComplete` | `boolean` | - | Onboarding completion status |
78
+ | `sheetEditorRef` | `RefObject<WorkbookInstance>` | - | External ref to editor instance |
79
+
80
+ ### Advanced Props
81
+
82
+ | Prop | Type | Description |
83
+ |------|------|-------------|
84
+ | `renderNavbar` | `(editorValues?: EditorValues) => JSX.Element` | Custom navbar renderer |
85
+ | `onboardingHandler` | `OnboardingHandlerType` | Custom onboarding logic |
86
+ | `dataBlockApiKeyHandler` | `DataBlockApiKeyHandlerType` | API key handler for data blocks |
87
+ | `getCommentCellUI` | `(row: number, column: number) => void` | Custom comment UI handler |
88
+ | `commentData` | `Object` | Comment data for cells |
89
+ | `toggleTemplateSidebar` | `() => void` | Template sidebar toggle handler |
90
+ | `storeApiKey` | `(apiKeyName: string) => void` | API key storage handler |
91
+ | `onDataBlockApiResponse` | `(dataBlockName: string) => void` | Data block API response handler |
92
+ | `onDuneChartEmbed` | `() => void` | Dune chart embed handler |
93
+ | `onSheetCountChange` | `(sheetCount: number) => void` | Sheet count change handler |
94
+
95
+ ### UI State Props
96
+
97
+ | Prop | Type | Description |
98
+ |------|------|-------------|
99
+ | `setShowFetchURLModal` | `Dispatch<SetStateAction<boolean>>` | URL fetch modal state setter |
100
+ | `setFetchingURLData` | `(fetching: boolean) => void` | URL fetching state setter |
101
+ | `setInputFetchURLDataBlock` | `Dispatch<SetStateAction<string>>` | URL input state setter |
102
+ | `setForceSheetRender` | `Dispatch<SetStateAction<number>>` | Force re-render trigger |
103
+
104
+ ## Examples
105
+
106
+ ### Read-Only Viewer
107
+
108
+ ```typescript
109
+ <DsheetEditor
110
+ isAuthorized={true}
111
+ dsheetId="viewer-sheet"
112
+ isReadOnly={true}
113
+ allowComments={true}
114
+ portalContent={encodedData}
115
+ onChange={() => {}}
116
+ />
117
+ ```
34
118
 
35
- # dSheetProps Interface
119
+ ### Collaborative Editor
120
+
121
+ ```typescript
122
+ <DsheetEditor
123
+ isAuthorized={true}
124
+ dsheetId="collab-sheet"
125
+ username="john-doe"
126
+ isCollaborative={true}
127
+ enableWebrtc={true}
128
+ onChange={(data) => console.log('Sheet updated:', data)}
129
+ />
130
+ ```
131
+
132
+ ### Custom Navbar
133
+
134
+ ```typescript
135
+ <DsheetEditor
136
+ isAuthorized={true}
137
+ dsheetId="custom-sheet"
138
+ renderNavbar={(editorValues) => (
139
+ <div className="flex items-center gap-4">
140
+ <h1>My Custom Sheet</h1>
141
+ <button onClick={() => editorValues?.sheetEditorRef.current?.exportToExcel()}>
142
+ Export
143
+ </button>
144
+ </div>
145
+ )}
146
+ />
147
+ ```
36
148
 
37
- The `DsheetProps` interface is a TypeScript interface that defines the properties for a page-related component. It includes properties for handling preview mode, managing publishing data, and optionally storing metadata and content associated with the page.
149
+ ### With Templates
38
150
 
39
- ## Core Props
151
+ ```typescript
152
+ <DsheetEditor
153
+ isAuthorized={true}
154
+ dsheetId="template-sheet"
155
+ selectedTemplate="financial-budget"
156
+ isTemplateOpen={true}
157
+ toggleTemplateSidebar={() => setTemplateOpen(!templateOpen)}
158
+ />
159
+ ```
40
160
 
41
- | Property | Type | Description |
42
- | ------------------------ | --------------------------------------------- | ----------------------------------------------- |
43
- | `portalContent` | `JSONContent` | Initial content of the editor |
44
- | `onChange` | `(changes: JSONContent, chunk?: any) => void` | Callback triggered on editor content changes |
45
- | `ref` | `React.RefObject` | Reference to access editor instance |
46
- | `isReadOnly` | `boolean` | Controls if editor is in preview/read-only mode |
47
- | `allowComments` | `boolean` | Enables commenting in read-only mode - adds comment icon to toolbar and context menu (requires `isReadOnly=true`) |
48
- | `dsheetId` | `string` | Used as room id for collaboration |
161
+ ## Development
49
162
 
50
- ### Steps to run this example locally
163
+ ### Run Demo
51
164
 
52
- - `cd demo`
53
- - `npm i`
54
- - `npm run dev`
165
+ ```bash
166
+ cd demo
167
+ npm install
168
+ npm run dev
169
+ ```
170
+
171
+ ### Build Package
172
+
173
+ ```bash
174
+ npm run build
175
+ ```
176
+
177
+ ## TypeScript
178
+
179
+ All props are fully typed. Import types:
180
+
181
+ ```typescript
182
+ import { DsheetProps, SheetUpdateData, EditorValues } from '@fileverse-dev/dsheet/types';
183
+ ```
55
184
 
56
- It will open up a vite server, that will have the Dsheet Editor.
185
+ ## License
57
186
 
58
- ⚠️ This repository is currently undergoing rapid development, over the time more customization and API will be added.
187
+ MIT
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fileverse-dev/dsheet",
3
3
  "private": false,
4
4
  "description": "DSheet",
5
- "version": "1.0.23",
5
+ "version": "1.0.24",
6
6
  "main": "dist/index.es.js",
7
7
  "module": "dist/index.es.js",
8
8
  "exports": {
@@ -17,9 +17,6 @@
17
17
  "files": [
18
18
  "/dist"
19
19
  ],
20
- "publishConfig": {
21
- "access": "restricted"
22
- },
23
20
  "scripts": {
24
21
  "dev": "vite",
25
22
  "build": "tsc && vite build",