cloudinary-vscode/src/webview/index.ts at ebc22baf37ed8c2138ffe61e78883662de5aaaf7 · cloudinary-devs/cloudinary-vscode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
 * Cloudinary VS Code Extension - Webview Design System
 *
 * This module provides a consistent UI component library for building
 * webviews in the Cloudinary VS Code extension. It includes:
 *
 * - Design tokens (colors, spacing, typography)
 * - Base styles (reset, typography, layout utilities)
 * - UI components (buttons, cards, tabs, inputs, etc.)
 * - Utility scripts (clipboard, messaging)
 *
 * @example
 * ```typescript
 * import { getBaseStyles, getAllComponentStyles, createButton, createCard } from '../webview';
 *
 * const html = `
 *   <style>
 *     ${getBaseStyles()}
 *     ${getAllComponentStyles()}
 *   </style>
 *   ${createCard({
 *     title: 'My Panel',
 *     content: createButton({ text: 'Click Me' })
 *   })}
 * `;
 * ```
 */

// Design tokens
export {
  tokens,
  colors,
  spacing,
  radius,
  fontSize,
  transitions,
  shadows,
  getCSSVariables,
} from "./tokens";

// Base styles
export {
  getBaseStyles,
  getResetStyles,
  getTypographyStyles,
  getLayoutStyles,
  getAnimationStyles,
} from "./baseStyles";

// All components
export * from "./components";

// Utility scripts
export * from "./utils";

// Icons
export {
  icons,
  assetIcons,
  actionIcons,
  uiIcons,
  getAssetTypeIcon,
  type IconSize,
} from "./icons";

// Webview-specific scripts
export {
  getUploadWidgetScript,
  getPreviewAssetScript,
  getWelcomeScreenScript,
} from "./scripts";

// Import for combined functions
import { getBaseStyles } from "./baseStyles";
import { getAllComponentStyles, getAllComponentScripts } from "./components";
import { getClipboardScript, getMessagingScript } from "./utils";

/**
 * Returns the complete stylesheet for a webview.
 * Combines base styles with all component styles.
 *
 * @returns Complete CSS string for webview
 *
 * @example
 * ```typescript
 * panel.webview.html = `
 *   <style>${getCompleteStyles()}</style>
 *   <body>...</body>
 * `;
 * ```
 */
export function getCompleteStyles(): string {
  return [getBaseStyles(), getAllComponentStyles()].join("\n");
}

/**
 * Returns all JavaScript needed for interactive components.
 * Includes clipboard handling, tab switching, drop zones, etc.
 *
 * @returns Complete JavaScript string for webview
 *
 * @example
 * ```typescript
 * panel.webview.html = `
 *   <script>${getCompleteScripts()}</script>
 * `;
 * ```
 */
export function getCompleteScripts(): string {
  return [
    getMessagingScript(),
    getClipboardScript(),
    getAllComponentScripts(),
  ].join("\n");
}