create-nube-app 0.21.0 → 0.22.0

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Create Nube App",
 	"author": "Tiendanube / Nuvemshop",
 	"license": "MIT",
-	"version": "0.21.0",
+	"version": "0.22.0",
 	"bin": {
 		"create-nube-app": "dist/index.js"
 	},

package/templates/minimal/package.json

@@ -13,7 +13,7 @@
 	"author": "Tiendanube / Nuvemshop",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@tiendanube/nube-sdk-types": "^0.42.0",
+		"@tiendanube/nube-sdk-types": "^0.51.0",
 		"@vitest/coverage-v8": "^3.0.9",
 		"concurrently": "^9.1.2",
 		"serve": "^14.2.4",

package/templates/minimal-ui/package.json

@@ -14,8 +14,8 @@
 	"author": "Tiendanube / Nuvemshop",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@tiendanube/nube-sdk-ui": "^0.14.0",
-		"@tiendanube/nube-sdk-types": "^0.42.0",
+		"@tiendanube/nube-sdk-ui": "^0.17.0",
+		"@tiendanube/nube-sdk-types": "^0.51.0",
 		"@vitest/coverage-v8": "^3.0.9",
 		"concurrently": "^9.1.2",
 		"serve": "^14.2.4",

package/templates/minimal-ui/src/components/Logo.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from "vitest";
+import { Logo } from "./Logo";
+
+// Mock the SDK functions
+vi.mock("@tiendanube/nube-sdk-ui", () => ({
+	svgRoot: vi.fn((props) => props),
+	svgPath: vi.fn((props) => ({ type: "path", ...props })),
+}));
+
+describe("Logo", () => {
+	it("should return a valid SVG element", () => {
+		const result = Logo();
+		expect(result).toBeDefined();
+		expect(result.xmlns).toBe("http://www.w3.org/2000/svg");
+		expect(result.width).toBe("246");
+		expect(result.height).toBe("40");
+		expect(result.viewBox).toBe("0 0 123 20");
+	});
+});

package/templates/minimal-ui/src/components/Logo.ts

@@ -0,0 +1,53 @@
+import { svgPath, svgRoot } from "@tiendanube/nube-sdk-ui";
+
+export function Logo() {
+	return svgRoot({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "246",
+		height: "40",
+		viewBox: "0 0 123 20",
+		fill: "none",
+		children: [
+			svgPath({
+				d: "M35.4705 15.5619H33.3642V6.66537H35.4705V7.8454C35.7651 7.3963 36.1712 7.03139 36.6492 6.78641C37.1271 6.54143 37.6605 6.42479 38.1971 6.44789C40.3719 6.44789 41.6445 7.88164 41.6445 10.2054V15.5619H39.5382V10.6042C39.5382 9.22276 38.8495 8.38909 37.5607 8.38909C36.272 8.38909 35.4705 9.35164 35.4705 10.878V15.5619Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M43.1709 11.7278V6.66537H45.2732V11.611C45.2732 13.0085 45.9659 13.8422 47.1258 13.8422C48.2857 13.8422 48.9784 13.0085 48.9784 11.611V6.66537H51.0847V11.7278C51.0847 14.2892 49.5946 15.7793 47.1258 15.7793C44.657 15.7793 43.1709 14.2892 43.1709 11.7278Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M51.717 6.66538H53.9522L56.3284 12.8192L58.7448 6.64927H60.9236L57.2587 15.5458H55.4061L51.717 6.66538Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M69.4013 13.4717C69.0175 14.1983 68.4352 14.801 67.7222 15.2096C67.0092 15.6181 66.1948 15.8157 65.3739 15.7794C62.6675 15.7794 60.7424 13.8543 60.7424 11.1116C60.7424 8.44548 62.7037 6.4479 65.2651 6.4479C67.8265 6.4479 69.6953 8.46159 69.6953 11.1116C69.6953 11.2767 69.6952 11.5143 69.6751 11.7479H62.8286C62.8914 12.3769 63.1901 12.9588 63.6646 13.3764C64.1391 13.7941 64.7541 14.0166 65.3859 13.9992C66.5499 13.9992 67.1459 13.4354 67.6574 12.6541L69.4013 13.4717ZM67.6211 10.2216C67.5565 9.64322 67.2758 9.11065 66.8352 8.73051C66.3945 8.35038 65.8265 8.15075 65.245 8.17162C64.6726 8.18618 64.1229 8.39827 63.6891 8.77189C63.2553 9.14552 62.9641 9.65769 62.8648 10.2216H67.6211Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M72.9413 15.5619H70.835V6.66538H72.9413V7.8454C73.1927 7.39888 73.5638 7.03145 74.0128 6.78453C74.4619 6.53761 74.9709 6.42102 75.4826 6.4479C76.0466 6.42085 76.6058 6.56379 77.0876 6.8582C77.5694 7.15261 77.9517 7.58492 78.185 8.09913C78.4845 7.58327 78.9174 7.15767 79.4383 6.86709C79.9593 6.57651 80.5489 6.4317 81.1451 6.4479C83.1991 6.4479 84.367 7.86151 84.367 10.0967V15.5619H82.2607V10.4954C82.2607 9.18652 81.6606 8.37299 80.5531 8.37299C79.4456 8.37299 78.6643 9.29526 78.6481 10.7491V15.582H76.5418V10.5679C76.5418 9.18652 75.9417 8.37299 74.8342 8.37299C73.7267 8.37299 72.9293 9.3154 72.9293 10.8418L72.9413 15.5619Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M86.9365 12.6179C87.0561 13.0009 87.2915 13.3375 87.6103 13.5813C87.9291 13.8251 88.3156 13.9641 88.7166 13.9791C89.3691 13.9791 89.9248 13.6892 89.9248 13.0569C89.9248 12.5655 89.6188 12.3118 88.9099 12.0943L87.8387 11.748C86.3324 11.2566 85.5672 10.4028 85.5672 9.17042C85.5672 7.49906 86.9647 6.44791 88.6361 6.44791C89.3107 6.43412 89.9747 6.61724 90.547 6.97488C91.1192 7.33251 91.5748 7.84915 91.858 8.4616L90.1665 9.36777C89.8242 8.66297 89.2966 8.18774 88.624 8.18774C88.0239 8.18774 87.5527 8.49785 87.5527 8.99322C87.5527 9.39596 87.8789 9.73829 88.5515 9.95576L89.6067 10.3021C91.274 10.866 91.9466 11.7157 91.9466 12.8958C91.9466 14.7121 90.4202 15.7673 88.6804 15.7673C87.9386 15.8033 87.2046 15.6027 86.5842 15.1944C85.9638 14.7862 85.4892 14.1914 85.2289 13.4958L86.9365 12.6179Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M95.104 15.5619H92.9977V3.33474H95.104V7.84541C95.3982 7.39691 95.8037 7.03238 96.2809 6.78744C96.7581 6.54249 97.2906 6.42551 97.8265 6.44791C100.005 6.44791 101.278 7.88166 101.278 10.2055V15.5619H99.1717V10.6042C99.1717 9.22277 98.483 8.38911 97.1942 8.38911C95.9055 8.38911 95.104 9.35165 95.104 10.878V15.5619Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M111.85 11.1116C111.865 12.0523 111.6 12.9761 111.089 13.7657C110.577 14.5552 109.842 15.1747 108.977 15.5452C108.113 15.9157 107.157 16.0206 106.233 15.8464C105.308 15.6723 104.456 15.2269 103.786 14.5672C103.115 13.9074 102.656 13.063 102.467 12.1414C102.278 11.2199 102.367 10.2629 102.723 9.39225C103.08 8.52162 103.687 7.77673 104.468 7.25241C105.249 6.72808 106.169 6.44803 107.11 6.44791C107.73 6.43165 108.348 6.54059 108.925 6.76823C109.502 6.99587 110.028 7.33755 110.47 7.77285C110.913 8.20815 111.263 8.72815 111.5 9.3018C111.737 9.87545 111.856 10.491 111.85 11.1116ZM104.46 11.1116C104.477 11.6316 104.647 12.135 104.949 12.559C105.25 12.983 105.67 13.3088 106.155 13.4958C106.641 13.6829 107.171 13.7229 107.679 13.6109C108.187 13.4988 108.651 13.2397 109.013 12.8658C109.374 12.4919 109.618 12.0198 109.713 11.5083C109.809 10.9968 109.751 10.4686 109.548 9.98949C109.345 9.51041 109.006 9.10165 108.572 8.81419C108.139 8.52673 107.63 8.37329 107.11 8.373C106.756 8.37769 106.407 8.45247 106.082 8.59301C105.758 8.73355 105.464 8.93706 105.219 9.19175C104.974 9.44645 104.781 9.74728 104.653 10.0768C104.525 10.4064 104.463 10.7581 104.472 11.1116H104.46Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M115.164 6.66538V7.934C115.512 7.46384 115.966 7.08358 116.49 6.82504C117.014 6.5665 117.593 6.43718 118.177 6.4479C120.63 6.4479 122.518 8.46159 122.518 11.1116C122.518 13.7616 120.63 15.7794 118.177 15.7794C117.597 15.7991 117.02 15.6792 116.496 15.4297C115.972 15.1802 115.515 14.8084 115.164 14.3456V18.8845H113.058V6.66538H115.164ZM117.742 8.35285C117.193 8.33521 116.651 8.48189 116.186 8.7741C115.721 9.06632 115.353 9.49075 115.131 9.99304C114.908 10.4953 114.841 11.0526 114.937 11.5934C115.034 12.1343 115.289 12.6341 115.671 13.0288C116.053 13.4236 116.544 13.6952 117.082 13.8091C117.619 13.9229 118.178 13.8737 118.688 13.6677C119.197 13.4618 119.633 13.1085 119.94 12.6531C120.248 12.1977 120.412 11.661 120.412 11.1116C120.421 10.7544 120.358 10.3991 120.228 10.0663C120.098 9.73356 119.903 9.42997 119.655 9.17324C119.406 8.91652 119.109 8.71177 118.781 8.57093C118.452 8.43008 118.099 8.35596 117.742 8.35285Z",
+				fill: "#0050c3",
+			}),
+			svgPath({
+				d: "M17.7661 5.51016e-05C15.1695 0.00074292 12.6751 1.0118 10.8108 2.81923C9.62785 2.31908 8.33944 2.11956 7.06058 2.23846C5.78172 2.35737 4.55218 2.791 3.48167 3.50066C2.41116 4.21033 1.53297 5.17395 0.925454 6.30557C0.31794 7.43718 0 8.70158 0 9.98596C0 11.2703 0.31794 12.5347 0.925454 13.6664C1.53297 14.798 2.41116 15.7616 3.48167 16.4713C4.55218 17.1809 5.78172 17.6146 7.06058 17.7335C8.33944 17.8524 9.62785 17.6528 10.8108 17.1527C11.9846 18.2995 13.4225 19.1398 14.9978 19.5996C16.5731 20.0593 18.2373 20.1243 19.8437 19.7888C21.45 19.4533 22.9491 18.7277 24.2088 17.6759C25.4684 16.6241 26.4498 15.2785 27.0664 13.7578C27.6831 12.237 27.916 10.5879 27.7447 8.95587C27.5733 7.32384 27.003 5.75905 26.0839 4.39954C25.1649 3.04004 23.9254 1.92759 22.4748 1.16034C21.0242 0.393086 19.4071 -0.00539192 17.7661 5.51016e-05ZM17.7661 17.781C16.7423 17.7836 15.7279 17.5844 14.7811 17.1946C13.8343 16.8049 12.9736 16.2323 12.2483 15.5096C11.523 14.7869 10.9473 13.9283 10.5542 12.9829C10.161 12.0376 9.95809 11.0239 9.95704 10.0001H7.746C7.74544 11.89 8.28327 13.741 9.29655 15.3363C8.79677 15.4825 8.2788 15.5571 7.75808 15.5578C6.28407 15.5578 4.87042 14.9723 3.82813 13.93C2.78584 12.8877 2.20029 11.4741 2.20029 10.0001C2.20029 8.52604 2.78584 7.11239 3.82813 6.0701C4.87042 5.02781 6.28407 4.44226 7.75808 4.44226C8.48794 4.44226 9.21066 4.58602 9.88496 4.86532C10.5593 5.14463 11.1719 5.55401 11.688 6.0701C12.2041 6.58619 12.6135 7.19888 12.8928 7.87318C13.1721 8.54748 13.3159 9.2702 13.3159 10.0001H15.539C15.5451 8.86508 15.3007 7.74273 14.8231 6.71311C14.3456 5.68348 13.6466 4.77194 12.7762 4.04355C13.735 3.24008 14.8734 2.67974 16.0949 2.41008C17.3164 2.14042 18.5849 2.16939 19.7928 2.49455C21.0008 2.8197 22.1124 3.43144 23.0335 4.27786C23.9546 5.12427 24.6579 6.18038 25.0837 7.35657C25.5096 8.53277 25.6454 9.79433 25.4797 11.0342C25.314 12.2741 24.8517 13.4557 24.1319 14.4788C23.4122 15.5019 22.4562 16.3363 21.3452 16.9112C20.2342 17.486 19.0009 17.7844 17.75 17.781H17.7661Z",
+				fill: "#0050c3",
+			}),
+		],
+	});
+}

package/templates/minimal-ui/src/main.ts

@@ -1,12 +1,40 @@
 import type { NubeSDK } from "@tiendanube/nube-sdk-types";
-import { MyCustomField } from "./components/MyCustomField";
+import { column, text } from "@tiendanube/nube-sdk-ui";
+import { Logo } from "./components/Logo";
 
 export function App(nube: NubeSDK) {
-	nube.send("ui:slot:set", () => ({
-		ui: {
-			slots: {
-				after_line_items: MyCustomField(),
+	nube.render(
+		"before_main_content",
+		column({
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				paddingTop: "20px",
 			},
-		},
-	}));
+			children: [
+				Logo(),
+				text({
+					color: "#626262",
+					children: "+",
+				}),
+				text({
+					heading: 1,
+					style: {
+						fontSize: "24px",
+						fontWeight: 600,
+						color: "#0050c3",
+						margin: "0",
+						padding: "0",
+					},
+					children: "NubeSDK",
+				}),
+				text({
+					color: "#626262",
+					children:
+						"https://dev.nuvemshop.com.br/docs/applications/nube-sdk/overview",
+				}),
+			],
+		}),
+	);
 }

package/templates/minimal-ui-jsx/package.json

@@ -14,9 +14,9 @@
 	"author": "Tiendanube / Nuvemshop",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@tiendanube/nube-sdk-ui": "^0.14.0",
-		"@tiendanube/nube-sdk-jsx": "^0.13.0",
-		"@tiendanube/nube-sdk-types": "^0.42.0",
+		"@tiendanube/nube-sdk-ui": "^0.17.0",
+		"@tiendanube/nube-sdk-jsx": "^0.16.0",
+		"@tiendanube/nube-sdk-types": "^0.51.0",
 		"@vitest/coverage-v8": "^3.0.9",
 		"concurrently": "^9.1.2",
 		"serve": "^14.2.4",

package/templates/minimal-ui-jsx/src/components/Logo.spec.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from "vitest";
+import { Logo } from "./Logo";
+
+// Mock the SDK SVG components
+vi.mock("@tiendanube/nube-sdk-jsx", () => {
+	const createMockComponent = (name: string) => {
+		const Component = (props: Record<string, unknown>) => {
+			const { children, ...restProps } = props;
+			return {
+				type: name,
+				props: restProps,
+				children: children || [],
+			};
+		};
+		Component.displayName = name;
+		return Component;
+	};
+
+	return {
+		Svg: {
+			Root: createMockComponent("Svg.Root"),
+			Path: createMockComponent("Svg.Path"),
+		},
+	};
+});
+
+describe("Logo", () => {
+	it("should render", () => {
+		const result = Logo();
+		expect(result).toBeDefined();
+	});
+});

package/templates/minimal-ui-jsx/src/main.tsx

@@ -1,6 +1,6 @@
+import { Column, Text } from "@tiendanube/nube-sdk-jsx";
 import type { NubeSDK } from "@tiendanube/nube-sdk-types";
 import { styled } from "@tiendanube/nube-sdk-ui";
-import { Column, Text } from "@tiendanube/nube-sdk-jsx";
 import { Logo } from "./components/Logo";
 
 const StyledColumn = styled(Column)`

package/templates/minimal-ui/src/components/MyCustomField.test.ts

@@ -1,51 +0,0 @@
-import type {
-	NubeComponent,
-	NubeComponentBox,
-	NubeComponentField,
-	NubeSDKState,
-} from "@tiendanube/nube-sdk-types";
-import { describe, expect, it, vi } from "vitest";
-import { MyCustomField } from "./MyCustomField";
-
-describe("MyCustomField", () => {
-	it("should render a Box with correct dimensions", () => {
-		const result = MyCustomField() as NubeComponentBox;
-
-		expect(result).toEqual({
-			type: "box",
-			width: 100,
-			height: 200,
-			children: expect.any(Array),
-		});
-	});
-
-	it("should render a Field component with correct props", () => {
-		const result = MyCustomField() as NubeComponentBox;
-		const children = result.children as NubeComponent[];
-		const field = children[0] as NubeComponentField;
-
-		expect(field).toEqual({
-			type: "field",
-			id: "my-custom-field",
-			label: "Name",
-			name: "Name",
-			onChange: expect.any(Function),
-		});
-	});
-
-	it("should log user input when field changes", () => {
-		const consoleSpy = vi.spyOn(console, "log");
-		const result = MyCustomField() as NubeComponentBox;
-		const children = result.children as NubeComponent[];
-		const field = children[0] as NubeComponentField;
-
-		// Simulate field change event
-		field.onChange?.({
-			type: "change",
-			state: {} as NubeSDKState,
-			value: "John Doe",
-		});
-
-		expect(consoleSpy).toHaveBeenCalledWith("User name: John Doe");
-	});
-});

package/templates/minimal-ui/src/components/MyCustomField.ts

@@ -1,18 +0,0 @@
-import { box, field } from "@tiendanube/nube-sdk-ui";
-
-export function MyCustomField() {
-	return box({
-		width: 100,
-		height: 200,
-		children: [
-			field({
-				id: "my-custom-field",
-				label: "Name",
-				name: "Name",
-				onChange: (e) => {
-					console.log(`User name: ${e.value}`);
-				},
-			}),
-		],
-	});
-}

package/templates/minimal-ui/src/main.test.ts

@@ -1,52 +0,0 @@
-import type { NubeSDK, NubeSDKState } from "@tiendanube/nube-sdk-types";
-import { describe, expect, it, vi } from "vitest";
-import { App } from "./main";
-
-// Mock do componente MyCustomField
-vi.mock("./components/MyCustomField", () => ({
-	MyCustomField: vi.fn(() => ({
-		type: "box",
-		width: 100,
-		height: 100,
-	})),
-}));
-
-describe("App", () => {
-	it("should set MyCustomField component in after_line_items slot", () => {
-		// Mock NubeSDK
-		const mockNube: Partial<NubeSDK> = {
-			send: vi.fn(),
-		};
-
-		// Execute App function with mock
-		App(mockNube as NubeSDK);
-
-		// Verify if send was called with correct parameters
-		expect(mockNube.send).toHaveBeenCalledWith(
-			"ui:slot:set",
-			expect.any(Function),
-		);
-
-		// Get the slot setter function
-		const slotSetter = (mockNube.send as ReturnType<typeof vi.fn>).mock
-			.calls[0][1] as (state: NubeSDKState) => {
-			ui: { slots: { after_line_items: unknown } };
-		};
-
-		// Execute the slot setter function
-		const result = slotSetter({} as NubeSDKState);
-
-		// Verify if the slot was set with MyCustomField component
-		expect(result).toEqual({
-			ui: {
-				slots: {
-					after_line_items: expect.objectContaining({
-						type: "box",
-						width: 100,
-						height: 100,
-					}),
-				},
-			},
-		});
-	});
-});

package/templates/minimal-ui-jsx/src/main.test.tsx

@@ -1,52 +0,0 @@
-import type { NubeSDK, NubeSDKState } from "@tiendanube/nube-sdk-types";
-import { describe, expect, it, vi } from "vitest";
-import { App } from "./main";
-
-// Mock do componente MyCustomField
-vi.mock("./components/MyCustomField", () => ({
-	MyCustomField: vi.fn(() => ({
-		type: "box",
-		width: 100,
-		height: 100,
-	})),
-}));
-
-describe("App", () => {
-	it("should set MyCustomField component in after_line_items slot", () => {
-		// Mock NubeSDK
-		const mockNube: Partial<NubeSDK> = {
-			send: vi.fn(),
-		};
-
-		// Execute App function with mock
-		App(mockNube as NubeSDK);
-
-		// Verify if send was called with correct parameters
-		expect(mockNube.send).toHaveBeenCalledWith(
-			"ui:slot:set",
-			expect.any(Function),
-		);
-
-		// Get the slot setter function
-		const slotSetter = (mockNube.send as ReturnType<typeof vi.fn>).mock
-			.calls[0][1] as (state: NubeSDKState) => {
-			ui: { slots: { after_line_items: unknown } };
-		};
-
-		// Execute the slot setter function
-		const result = slotSetter({} as NubeSDKState);
-
-		// Verify if the slot was set with MyCustomField component
-		expect(result).toEqual({
-			ui: {
-				slots: {
-					after_line_items: expect.objectContaining({
-						type: "box",
-						width: 100,
-						height: 100,
-					}),
-				},
-			},
-		});
-	});
-});