@papyrus-sdk/ui-react 0.2.2 → 0.2.3
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.
- package/README.md +25 -0
- package/base.css +68 -0
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -20,6 +20,31 @@ await engine.load({ type: 'pdf', source: { uri: 'https://example.com/book.pdf' }
|
|
|
20
20
|
<Viewer engine={engine} />
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
## Styling modes
|
|
24
|
+
|
|
25
|
+
Papyrus UI uses utility-first class names compatible with Tailwind.
|
|
26
|
+
|
|
27
|
+
You can choose one of the following:
|
|
28
|
+
|
|
29
|
+
1) **Tailwind (recommended)**
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
pnpm add -D tailwindcss postcss autoprefixer
|
|
33
|
+
npx tailwindcss init -p
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
2) **Fallback CSS (no Tailwind)**
|
|
37
|
+
|
|
38
|
+
Import a minimal base stylesheet:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import '@papyrus-sdk/ui-react/base.css';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
3) **Headless**
|
|
45
|
+
|
|
46
|
+
Use `@papyrus-sdk/core` + engines and build your own UI.
|
|
47
|
+
|
|
23
48
|
## Topbar customization
|
|
24
49
|
|
|
25
50
|
`Topbar` accepts optional flags to show/hide controls.
|
package/base.css
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
.papyrus-topbar {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background: #ffffff;
|
|
4
|
+
border-bottom: 1px solid #e5e7eb;
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
color: #111827;
|
|
7
|
+
display: flex;
|
|
8
|
+
height: 56px;
|
|
9
|
+
justify-content: space-between;
|
|
10
|
+
padding: 0 16px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.papyrus-sidebar-left {
|
|
14
|
+
background: #ffffff;
|
|
15
|
+
border-right: 1px solid #e5e7eb;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
height: 100%;
|
|
20
|
+
width: 288px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.papyrus-sidebar-right {
|
|
24
|
+
background: #ffffff;
|
|
25
|
+
border-left: 1px solid #e5e7eb;
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
height: 100%;
|
|
30
|
+
width: 320px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.papyrus-viewer {
|
|
34
|
+
background: #f3f4f6;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
flex: 1 1 auto;
|
|
37
|
+
overflow: auto;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.papyrus-topbar button,
|
|
41
|
+
.papyrus-sidebar-left button,
|
|
42
|
+
.papyrus-sidebar-right button {
|
|
43
|
+
background: none;
|
|
44
|
+
border: 0;
|
|
45
|
+
color: inherit;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
font: inherit;
|
|
48
|
+
padding: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.papyrus-topbar input,
|
|
52
|
+
.papyrus-sidebar-left input,
|
|
53
|
+
.papyrus-sidebar-right input,
|
|
54
|
+
.papyrus-topbar select,
|
|
55
|
+
.papyrus-sidebar-left select,
|
|
56
|
+
.papyrus-sidebar-right select {
|
|
57
|
+
background: #ffffff;
|
|
58
|
+
border: 1px solid #e5e7eb;
|
|
59
|
+
border-radius: 6px;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
color: #111827;
|
|
62
|
+
font: inherit;
|
|
63
|
+
padding: 6px 8px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.papyrus-viewer .page-container {
|
|
67
|
+
margin-bottom: 24px;
|
|
68
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@papyrus-sdk/ui-react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"papyrus",
|
|
@@ -20,10 +20,12 @@
|
|
|
20
20
|
"types": "./dist/index.d.ts",
|
|
21
21
|
"import": "./dist/index.mjs",
|
|
22
22
|
"require": "./dist/index.js"
|
|
23
|
-
}
|
|
23
|
+
},
|
|
24
|
+
"./base.css": "./base.css"
|
|
24
25
|
},
|
|
25
26
|
"files": [
|
|
26
|
-
"dist"
|
|
27
|
+
"dist",
|
|
28
|
+
"base.css"
|
|
27
29
|
],
|
|
28
30
|
"publishConfig": {
|
|
29
31
|
"access": "public"
|