npm install @selorax/ui

const { selorax, Card, Stack, Text, Button } = require("@selorax/ui");
 
// Signal readiness to the host
selorax.ready();
 
// Build a UI tree and send it to the host for rendering
selorax.render(
  Card(
    { title: "My Extension" },
    Stack(
      { direction: "vertical", gap: "md" },
      Text({ content: "Hello from a sandbox extension!" }),
      Button({
        label: "Load Products",
        variant: "primary",
        action: { type: "navigate", url: "/products" },
      }),
    ),
  ),
);

{
  "extensions": [
    {
      "extension_id": "my-sandbox-ext",
      "target": "order.detail.block",
      "title": "My Extension",
      "mode": "sandbox",
      "entry": "extensions/my-ext/index.js"
    }
  ]
}

selorax deploy

selorax.render(
  Card({ title: "Status" }, Text({ content: "Everything is good." })),
);

selorax.toast("Saved successfully!");
selorax.toast("Something went wrong", "error");

selorax.navigate("/orders");
selorax.openLink("https://docs.myapp.com");

selorax.modal.open({
  title: "Confirm Deletion",
  ui: Stack(
    { direction: "vertical", gap: "md" },
    Text({ content: "Are you sure you want to delete this item?" }),
    Stack(
      { direction: "horizontal", gap: "sm" },
      Button({
        label: "Cancel",
        variant: "secondary",
        action: { type: "close_modal" },
      }),
      Button({
        label: "Delete",
        variant: "destructive",
        action: { type: "close_modal" },
      }),
    ),
  ),
});

selorax.dispatchAction("navigate", { url: "/orders/123" });
selorax.dispatchAction("open_modal", { id: "confirm-dialog" });

// Fetch orders
const orders = await selorax.api.get(
  "/apps/v1/orders?status=confirmed&limit=10",
);
console.log(orders.data);
 
// Update a product
await selorax.api.put("/apps/v1/products/150", {
  name: "Updated Product Name",
});

// Single product
const products = await selorax.picker.product();
if (products) {
  console.log("Selected:", products[0].name);
}
 
// Multiple customers
const customers = await selorax.picker.customer({ multiple: true });
if (customers) {
  console.log("Selected", customers.length, "customers");
}

selorax.ui.titleBar({
  title: "Inventory Manager",
  breadcrumbs: [{ label: "Apps" }, { label: "Inventory Manager" }],
  primaryAction: { label: "Save" },
  secondaryActions: [{ label: "Export" }, { label: "Settings" }],
});

selorax.ui.showSaveBar({
  message: "Unsaved changes",
  saveAction: { label: "Save", loading: false },
  discardAction: { label: "Discard" },
});
 
// Listen for save/discard clicks
selorax.onSaveBar((event) => {
  if (event.action === "save") {
    // Persist changes
    selorax.ui.hideSaveBar();
  } else if (event.action === "discard") {
    // Revert changes
    selorax.ui.hideSaveBar();
  }
});

selorax.ui.startLoading();
 
// After your operation completes:
selorax.ui.completeLoading();

selorax.onTitleBarAction((event) => {
  if (event.action_type === "primary") {
    // Primary action clicked (e.g., "Save")
  } else if (event.action_type === "secondary") {
    // Secondary action clicked; event.index tells you which one
  }
});

// Read metafields for an order
const metafields = await selorax.metafields.get(
  "order",
  selorax.context.order_id,
);
 
// Set a metafield
await selorax.metafields.set({
  namespace: "my-app",
  key: "risk_score",
  resource_type: "order",
  resource_id: selorax.context.order_id,
  value: 85,
});
 
// Get a specific value
const score = await selorax.metafields.getValue(
  "my-app",
  "risk_score",
  "order",
  selorax.context.order_id,
);

const charge = await selorax.billing.createCharge({
  name: "Premium Report",
  amount: 500,
  currency: "BDT",
});

const subs = await selorax.webhooks.list();
 
await selorax.webhooks.subscribe({
  topic: "order.status_changed",
  url: "https://myapp.com/webhooks/orders",
});

selorax.i18n.setTranslations({
  en: {
    greeting: "Hello, {{name}}!",
    status: { pending: "Pending", confirmed: "Confirmed" },
  },
  bn: {
    greeting: "হ্যালো, {{name}}!",
    status: { pending: "অপেক্ষমান", confirmed: "নিশ্চিত" },
  },
});
 
// selorax.i18n.locale is set from the host context automatically
const msg = selorax.i18n.t("greeting", { name: "Rahim" });
// "Hello, Rahim!" (if locale is 'en')
 
const status = selorax.i18n.t("status.pending");
// "Pending"

const unsubscribe = selorax.onContextUpdate((context) => {
  console.log("New context:", context);
  // Re-render with new data
});
 
// Later, to stop listening:
unsubscribe();

const { Card, Stack, Text, Button, Badge, Table } = require("@selorax/ui");
 
// Containers accept children as arguments
const ui = Card(
  { title: "Orders" },
  Stack(
    { direction: "vertical", gap: "md" },
    Text({ content: "Recent orders" }),
    Table({
      columns: [
        { key: "id", label: "Order ID" },
        { key: "status", label: "Status" },
        { key: "total", label: "Total" },
      ],
      rows: [
        { id: "#1045", status: "Confirmed", total: "1,460 BDT" },
        { id: "#1044", status: "Pending", total: "860 BDT" },
      ],
    }),
  ),
);
 
selorax.render(ui);

const {
  selorax,
  Card,
  BlockStack,
  InlineStack,
  Text,
  TextField,
  Button,
  Tag,
  Spinner,
} = require("@selorax/ui");
 
let tags = [];
let newTag = "";
let loading = true;
 
selorax.ready();
 
// Load existing tags from metafields
async function loadTags() {
  loading = true;
  render();
 
  try {
    const value = await selorax.metafields.getValue(
      "tag-manager",
      "custom_tags",
      "product",
      selorax.context.product_id,
    );
    tags = value && value.value ? JSON.parse(value.value) : [];
  } catch {
    tags = [];
  }
 
  loading = false;
  render();
}
 
async function saveTags() {
  await selorax.metafields.set({
    namespace: "tag-manager",
    key: "custom_tags",
    resource_type: "product",
    resource_id: selorax.context.product_id,
    value: JSON.stringify(tags),
  });
  selorax.toast("Tags saved!");
}
 
function render() {
  if (loading) {
    selorax.render(
      Card({ title: "Custom Tags" }, Spinner({ label: "Loading tags..." })),
    );
    return;
  }
 
  const tagNodes = tags.map((tag, i) =>
    Tag({
      content: tag,
      onRemove: { type: "set_state", key: "__remove_tag_" + i, value: true },
    }),
  );
 
  selorax.render(
    Card(
      { title: "Custom Tags" },
      BlockStack(
        { gap: "md" },
        InlineStack({ gap: "sm" }, ...tagNodes),
        InlineStack(
          { gap: "sm" },
          TextField({
            name: "new_tag",
            placeholder: "Add a tag...",
            bind: "__new_tag",
          }),
          Button({
            label: "Add",
            variant: "secondary",
            action: { type: "set_state", key: "__add_tag", value: true },
          }),
        ),
        Button({
          label: "Save Tags",
          variant: "primary",
          action: { type: "set_state", key: "__save", value: true },
        }),
      ),
    ),
  );
}
 
// Use the product picker
async function pickRelatedProduct() {
  const selected = await selorax.picker.product({ multiple: false });
  if (selected && selected.length > 0) {
    selorax.toast("Selected: " + selected[0].name);
  }
}
 
loadTags();