@tiendanube/nube-sdk-snippet 0.1.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 (3) hide show
  1. package/README.md +66 -0
  2. package/package.json +47 -0
  3. package/snippet-env.d.ts +105 -0
package/README.md ADDED
@@ -0,0 +1,66 @@
1
+ # @tiendanube/nube-sdk-snippet
2
+
3
+ Type definitions for the NubeSDK snippet environment.
4
+
5
+ Snippets are TSX fragments that run in a Web Worker context managed by the platform. Unlike full NubeSDK apps, snippets do not import anything explicitly — all SDK globals (`nube`, `Box`, `styled`, etc.) are injected by the build system.
6
+
7
+ This package declares those globals so you get full TypeScript/IntelliSense support when writing snippets.
8
+
9
+ ## Usage
10
+
11
+ Add a triple-slash reference at the top of your snippet file:
12
+
13
+ ```tsx
14
+ /// <reference types="@tiendanube/nube-sdk-snippet" />
15
+
16
+ const translations: Readonly<Record<LanguageKey, string>> = {
17
+ pt: "Olá, bem-vindo!",
18
+ es: "Hola, ¡bienvenido!",
19
+ en: "Hi, welcome!"
20
+ };
21
+
22
+ function Greeting({ store }: NubeSDKState) {
23
+ const lang = store.language
24
+ const message = translations[lang]
25
+ return <Text heading={1}>{message}</Text>
26
+ }
27
+
28
+ nube.render("before_main_content", Greeting)
29
+ ```
30
+
31
+ ## Available Globals
32
+
33
+ ### SDK Instance
34
+
35
+ | Global | Type | Description |
36
+ |--------|------|-------------|
37
+ | `nube` | `NubeSDK` | Main entry point for interacting with the platform |
38
+
39
+ ### JSX Components
40
+
41
+ All components from `@tiendanube/nube-sdk-jsx` are available as globals:
42
+
43
+ `Box`, `Column`, `Row`, `Text`, `Button`, `Link`, `Image`, `Icon`, `Field`, `NumberField`, `Select`, `Checkbox`, `Textarea`, `Fragment`, `Progress`, `Iframe`, `Markdown`, `SideScroll`, `Accordion`, `Toast`, `Svg`
44
+
45
+ ### UI Utilities
46
+
47
+ All utilities from `@tiendanube/nube-sdk-ui` are available as globals:
48
+
49
+ | Global | Description |
50
+ |--------|-------------|
51
+ | `styled` | CSS-in-JS for component styling |
52
+ | `keyframes` | Defines CSS animations |
53
+ | `theme` | Access to theme tokens and variables |
54
+ | `StyleSheet` | Creates named style objects |
55
+
56
+ ## Installation
57
+
58
+ ```bash
59
+ npm install --save-dev @tiendanube/nube-sdk-snippet
60
+ ```
61
+
62
+ ## Peer Dependencies
63
+
64
+ - `@tiendanube/nube-sdk-types`
65
+ - `@tiendanube/nube-sdk-jsx`
66
+ - `@tiendanube/nube-sdk-ui`
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@tiendanube/nube-sdk-snippet",
3
+ "version": "0.1.0",
4
+ "description": "Type definitions and utilities for NubeSDK snippets",
5
+ "type": "module",
6
+ "types": "./snippet-env.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./snippet-env.d.ts"
10
+ }
11
+ },
12
+ "scripts": {
13
+ "check": "biome check snippet-env.d.ts",
14
+ "check:fix": "biome check --write snippet-env.d.ts"
15
+ },
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/TiendaNube/nube-sdk.git"
19
+ },
20
+ "author": "Tiendanube / Nuvemshop",
21
+ "license": "MIT",
22
+ "bugs": {
23
+ "url": "https://github.com/TiendaNube/nube-sdk/issues"
24
+ },
25
+ "homepage": "https://www.tiendanube.com",
26
+ "peerDependencies": {
27
+ "@tiendanube/nube-sdk-jsx": "*",
28
+ "@tiendanube/nube-sdk-types": "*",
29
+ "@tiendanube/nube-sdk-ui": "*"
30
+ },
31
+ "devDependencies": {
32
+ "@biomejs/biome": "1.8.3",
33
+ "typescript": "^5.6.2"
34
+ },
35
+ "files": [
36
+ "./snippet-env.d.ts",
37
+ "README.md"
38
+ ],
39
+ "keywords": [
40
+ "tiendanube",
41
+ "nuvemshop",
42
+ "nube-sdk",
43
+ "ecommerce",
44
+ "sdk",
45
+ "snippet"
46
+ ]
47
+ }
package/snippet-env.d.ts ADDED
@@ -0,0 +1,105 @@
1
+ /**
2
+ * Global type declarations for NubeSDK snippets.
3
+ *
4
+ * Snippets are code fragments that are injected into apps managed by the platform.
5
+ * Unlike full apps, snippets use global objects without explicit imports.
6
+ *
7
+ * This file declares all global variables available in the snippet context.
8
+ *
9
+ * Usage in snippets:
10
+ * @example
11
+ * /// <reference types="@tiendanube/nube-sdk-snippet" />
12
+ */
13
+
14
+ declare global {
15
+ // ============================================================================
16
+ // SDK Types (from @tiendanube/nube-sdk-types)
17
+ // Re-exported as globals so snippets can use them without explicit imports.
18
+ // ============================================================================
19
+
20
+ /** Main SDK instance type */
21
+ type NubeSDK = import("@tiendanube/nube-sdk-types").NubeSDK;
22
+ /** Full state object passed to render callbacks */
23
+ type NubeSDKState = import("@tiendanube/nube-sdk-types").NubeSDKState;
24
+ /** Supported language codes */
25
+ type LanguageKey = import("@tiendanube/nube-sdk-types").LanguageKey;
26
+ /** Generic NubeSDK component type */
27
+ type NubeComponent = import("@tiendanube/nube-sdk-types").NubeComponent;
28
+ /** UI slot identifier */
29
+ type UISlot = import("@tiendanube/nube-sdk-types").UISlot;
30
+ /** Storefront UI slot identifier */
31
+ type StorefrontUISlot = import("@tiendanube/nube-sdk-types").StorefrontUISlot;
32
+ /** Checkout UI slot identifier */
33
+ type CheckoutUISlot = import("@tiendanube/nube-sdk-types").CheckoutUISlot;
34
+ /** App settings values */
35
+ type AppSettingsValues =
36
+ import("@tiendanube/nube-sdk-types").AppSettingsValues;
37
+ /** State modifier function type */
38
+ type NubeSDKStateModifier =
39
+ import("@tiendanube/nube-sdk-types").NubeSDKStateModifier;
40
+
41
+ /** The NubeSDK instance - main entry point for interacting with the platform */
42
+ const nube: import("@tiendanube/nube-sdk-types").NubeSDK;
43
+
44
+ // ============================================================================
45
+ // JSX Components (from @tiendanube/nube-sdk-jsx)
46
+ // ============================================================================
47
+
48
+ /** Box component - flexible container for layouts */
49
+ const Box: typeof import("@tiendanube/nube-sdk-jsx").Box;
50
+ /** Column component - vertical layout container */
51
+ const Column: typeof import("@tiendanube/nube-sdk-jsx").Column;
52
+ /** Row component - horizontal layout container */
53
+ const Row: typeof import("@tiendanube/nube-sdk-jsx").Row;
54
+ /** Text component - renders text with optional styling */
55
+ const Text: typeof import("@tiendanube/nube-sdk-jsx").Text;
56
+ /** Button component - clickable element for actions */
57
+ const Button: typeof import("@tiendanube/nube-sdk-jsx").Button;
58
+ /** Link component - navigation links */
59
+ const Link: typeof import("@tiendanube/nube-sdk-jsx").Link;
60
+ /** Image component - displays images */
61
+ const Image: typeof import("@tiendanube/nube-sdk-jsx").Image;
62
+ /** Icon component - displays icons */
63
+ const Icon: typeof import("@tiendanube/nube-sdk-jsx").Icon;
64
+ /** Field component - form input element */
65
+ const Field: typeof import("@tiendanube/nube-sdk-jsx").Field;
66
+ /** NumberField component - numeric input with increment/decrement */
67
+ const NumberField: typeof import("@tiendanube/nube-sdk-jsx").NumberField;
68
+ /** Select component - dropdown menu */
69
+ const Select: typeof import("@tiendanube/nube-sdk-jsx").Select;
70
+ /** Checkbox component - selectable toggle */
71
+ const Checkbox: typeof import("@tiendanube/nube-sdk-jsx").Checkbox;
72
+ /** Textarea component - multi-line text input */
73
+ const Textarea: typeof import("@tiendanube/nube-sdk-jsx").Textarea;
74
+ /** Fragment component - logical grouping without DOM node */
75
+ const Fragment: typeof import("@tiendanube/nube-sdk-jsx").Fragment;
76
+ /** Progress component - displays task completion progress */
77
+ const Progress: typeof import("@tiendanube/nube-sdk-jsx").Progress;
78
+ /** Iframe component - embeds external content */
79
+ const Iframe: typeof import("@tiendanube/nube-sdk-jsx").Iframe;
80
+ /** Markdown component - renders markdown content */
81
+ const Markdown: typeof import("@tiendanube/nube-sdk-jsx").Markdown;
82
+ /** SideScroll component - horizontal scrolling container */
83
+ const SideScroll: typeof import("@tiendanube/nube-sdk-jsx").SideScroll;
84
+ /** Accordion component - expandable/collapsible list */
85
+ const Accordion: typeof import("@tiendanube/nube-sdk-jsx").Accordion;
86
+ /** Toast component - notification messages */
87
+ const Toast: typeof import("@tiendanube/nube-sdk-jsx").Toast;
88
+ /** Svg component - SVG graphics container and elements */
89
+ const Svg: typeof import("@tiendanube/nube-sdk-jsx").Svg;
90
+
91
+ // ============================================================================
92
+ // UI Utilities (from @tiendanube/nube-sdk-ui)
93
+ // ============================================================================
94
+
95
+ /** styled function - CSS-in-JS for component styling */
96
+ const styled: typeof import("@tiendanube/nube-sdk-ui").styled;
97
+ /** keyframes function - defines CSS animations */
98
+ const keyframes: typeof import("@tiendanube/nube-sdk-ui").keyframes;
99
+ /** theme object - access to theme tokens and variables */
100
+ const theme: typeof import("@tiendanube/nube-sdk-ui").theme;
101
+ /** StyleSheet - creates named style objects */
102
+ const StyleSheet: typeof import("@tiendanube/nube-sdk-ui").StyleSheet;
103
+ }
104
+
105
+ export type {};