jelena-hrga

import React from "react";
import axios from "axios";

export const Product = ({ productData }) => {
  const { app, FitOptions } = require("indesign");
  const allowedPlaceholders = ["title", "brand", "category", "price"];
  const { localFileSystem, types, formats } = require("uxp").storage;

  const fillInData = () => {
    const activeDocument = app.activeDocument;

jelena-hrga

  const getFilePath = async (activeDocument) => {
    const filePathPromise = activeDocument.filePath;

    try {
      const resolvedFilePath = await filePathPromise;

      return resolvedFilePath.nativePath;
    } catch (err) {
      console.err("couldn't resolve document path", err);

jelena-hrga

  const getImageBinaryData = async (src) => {
    try {
      const response = await axios.get(src, {
        responseType: "arraybuffer",
      });

      return response.data;
    } catch (err) {
      console.err("couldn't fetch image", err);

jelena-hrga

  const placeImage = async (rectEl) => {
    const activeDocument = app.activeDocument;
    const src = productData.images[0];
    const imgName = productData.title + "-img";

    const imageBinaryData = await getImageBinaryData(src);
    const documentPath = await getFilePath(activeDocument);
    let folderEntry = null;

    if (imageBinaryData && documentPath) {

jelena-hrga

import React from "react";

export const Product = ({ productData }) => {
  const { app, FitOptions } = require("indesign");
  const allowedPlaceholders = ["title", "brand", "category", "price"];

  const fillInData = () => {
    const activeDocument = app.activeDocument;
    const selection = activeDocument.selection;

jelena-hrga

@media (prefers-color-scheme: darkest), (prefers-color-scheme:dark) {
    h1 {
        color: white;
    }
}

jelena-hrga

.products-wrapper {
    margin-top: 20px;
}

.product {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px;
}

.product-info-line {

jelena-hrga

import React from "react";

export const Product = ({ productData }) => {
  return (
    <div className="product">
      <div className="product-info-line">
        <sp-body size="S">PRODUCT NAME: </sp-body>
        <sp-body size="M" class="text-bold">
          {productData.title}
        </sp-body>

jelena-hrga

  "requiredPermissions": {
    "network": {
        "domains": ["https://dummyjson.com"]
    }
  }

jelena-hrga

import React, { useState } from "react";

import { WC } from "./WC.jsx";
import { Product } from "./Product.jsx";
import axios from "axios";

import "./Home.css";

export const Home = () => {
  const [products, setProducts] = useState(null);