xlkit-demo 0.0.0

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 (8) hide show
  1. package/dist/assets/index-Btwfb27P.css +1 -0
  2. package/dist/assets/index-DpFtiGxh.js +86 -0
  3. package/dist/index.html +22 -0
  4. package/index.html +12 -0
  5. package/main.tsx +114 -0
  6. package/package.json +23 -0
  7. package/tsconfig.json +21 -0
  8. package/vite.config.ts +18 -0
package/dist/index.html ADDED
@@ -0,0 +1,22 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>xlkit - Declarative Excel Generation for TypeScript</title>
7
+ <meta name="description" content="Generate beautiful Excel files with a declarative, type-safe API. Works in Node.js and browsers." />
8
+ <meta name="keywords" content="excel, typescript, declarative, exceljs, spreadsheet, xlsx" />
9
+ <meta property="og:title" content="xlkit - Declarative Excel Generation" />
10
+ <meta property="og:description" content="Generate beautiful Excel files with a declarative, type-safe API." />
11
+ <meta property="og:type" content="website" />
12
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
15
+ <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/yn1323/xlkit/main/logo.png" />
16
+ <script type="module" crossorigin src="/xlkit/assets/index-DpFtiGxh.js"></script>
17
+ <link rel="stylesheet" crossorigin href="/xlkit/assets/index-Btwfb27P.css">
18
+ </head>
19
+ <body>
20
+ <div id="root"></div>
21
+ </body>
22
+ </html>
package/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>xlkit Demo</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="./main.tsx"></script>
11
+ </body>
12
+ </html>
package/main.tsx ADDED
@@ -0,0 +1,114 @@
1
+ import { Buffer } from "buffer";
2
+ import { StrictMode } from "react";
3
+ import { createRoot } from "react-dom/client";
4
+ import { xlkit } from "xlkit";
5
+
6
+ globalThis.Buffer = Buffer;
7
+
8
+ type SampleData = {
9
+ id: number;
10
+ name: string;
11
+ price: number;
12
+ quantity: number;
13
+ };
14
+
15
+ const sampleData: SampleData[] = [
16
+ { id: 1, name: "Apple", price: 150, quantity: 10 },
17
+ { id: 2, name: "Banana", price: 100, quantity: 25 },
18
+ { id: 3, name: "Orange", price: 120, quantity: 15 },
19
+ { id: 4, name: "Grape", price: 300, quantity: 8 },
20
+ { id: 5, name: "Melon", price: 800, quantity: 3 },
21
+ ];
22
+
23
+ const columns = [
24
+ { key: "id" as const, label: "ID" },
25
+ { key: "name" as const, label: "Product Name" },
26
+ { key: "price" as const, label: "Price" },
27
+ { key: "quantity" as const, label: "Quantity" },
28
+ ];
29
+
30
+ async function downloadExcel(preset: "basic" | "minimal" | "striped") {
31
+ const output = await xlkit()
32
+ .sheet("Products")
33
+ .table<SampleData>({
34
+ preset,
35
+ columns,
36
+ data: sampleData,
37
+ autoWidth: "all",
38
+ })
39
+ .getBrowser();
40
+
41
+ await output.download(`sample-${preset}.xlsx`);
42
+ }
43
+
44
+ function App() {
45
+ return (
46
+ <div style={{ padding: "2rem", fontFamily: "system-ui, sans-serif", maxWidth: "600px", margin: "0 auto" }}>
47
+ <h1>xlkit Demo</h1>
48
+ <p style={{ color: "#666", marginBottom: "2rem" }}>Declarative Excel generation library for TypeScript</p>
49
+
50
+ <h2 style={{ fontSize: "1.2rem", marginBottom: "1rem" }}>Table Presets</h2>
51
+ <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
52
+ <button
53
+ type="button"
54
+ onClick={() => downloadExcel("basic")}
55
+ style={{
56
+ padding: "0.75rem 1.5rem",
57
+ fontSize: "1rem",
58
+ cursor: "pointer",
59
+ backgroundColor: "#4472C4",
60
+ color: "white",
61
+ border: "none",
62
+ borderRadius: "4px",
63
+ }}
64
+ >
65
+ Basic Preset
66
+ </button>
67
+ <button
68
+ type="button"
69
+ onClick={() => downloadExcel("minimal")}
70
+ style={{
71
+ padding: "0.75rem 1.5rem",
72
+ fontSize: "1rem",
73
+ cursor: "pointer",
74
+ backgroundColor: "#70AD47",
75
+ color: "white",
76
+ border: "none",
77
+ borderRadius: "4px",
78
+ }}
79
+ >
80
+ Minimal Preset
81
+ </button>
82
+ <button
83
+ type="button"
84
+ onClick={() => downloadExcel("striped")}
85
+ style={{
86
+ padding: "0.75rem 1.5rem",
87
+ fontSize: "1rem",
88
+ cursor: "pointer",
89
+ backgroundColor: "#ED7D31",
90
+ color: "white",
91
+ border: "none",
92
+ borderRadius: "4px",
93
+ }}
94
+ >
95
+ Striped Preset
96
+ </button>
97
+ </div>
98
+
99
+ <div style={{ marginTop: "2rem", padding: "1rem", backgroundColor: "#f5f5f5", borderRadius: "4px" }}>
100
+ <h3 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>Sample Data</h3>
101
+ <pre style={{ fontSize: "0.85rem", overflow: "auto" }}>{JSON.stringify(sampleData, null, 2)}</pre>
102
+ </div>
103
+ </div>
104
+ );
105
+ }
106
+
107
+ const root = document.getElementById("root");
108
+ if (root) {
109
+ createRoot(root).render(
110
+ <StrictMode>
111
+ <App />
112
+ </StrictMode>,
113
+ );
114
+ }
package/package.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "xlkit-demo",
3
+ "version": "0.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "dependencies": {
11
+ "buffer": "^6.0.3",
12
+ "react": "^19.1.0",
13
+ "react-dom": "^19.1.0",
14
+ "xlkit": "^1.2.0"
15
+ },
16
+ "devDependencies": {
17
+ "@types/react": "^19.1.0",
18
+ "@types/react-dom": "^19.1.0",
19
+ "@vitejs/plugin-react": "^4.4.1",
20
+ "typescript": "^5.9.3",
21
+ "vite": "^7.1.7"
22
+ }
23
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2022",
4
+ "useDefineForClassFields": true,
5
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+ "moduleResolution": "bundler",
9
+ "allowImportingTsExtensions": true,
10
+ "isolatedModules": true,
11
+ "moduleDetection": "force",
12
+ "noEmit": true,
13
+ "jsx": "react-jsx",
14
+ "strict": true,
15
+ "noUnusedLocals": true,
16
+ "noUnusedParameters": true,
17
+ "noFallthroughCasesInSwitch": true,
18
+ "noUncheckedSideEffectImports": true
19
+ },
20
+ "include": ["*.tsx", "*.ts"]
21
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,18 @@
1
+ import react from "@vitejs/plugin-react";
2
+ import { defineConfig } from "vite";
3
+
4
+ export default defineConfig({
5
+ plugins: [react()],
6
+ base: process.env.NODE_ENV === "production" ? "/xlkit/" : "/",
7
+ define: {
8
+ global: "globalThis",
9
+ },
10
+ resolve: {
11
+ alias: {
12
+ buffer: "buffer/",
13
+ },
14
+ },
15
+ optimizeDeps: {
16
+ include: ["buffer"],
17
+ },
18
+ });