import { DataTable } from "hs-uix/datatable";
import { FormBuilder } from "hs-uix/form";

// or import everything from the root
import { DataTable, FormBuilder } from "hs-uix";

import { DataTable } from "hs-uix/datatable";

const COLUMNS = [
  { field: "name", label: "Company", sortable: true, renderCell: (val) => val },
  { field: "status", label: "Status", renderCell: (val) => <StatusTag>{val}</StatusTag> },
  { field: "amount", label: "Amount", sortable: true, renderCell: (val) => formatCurrency(val) },
];

<DataTable data={deals} columns={COLUMNS} searchFields={["name"]} pageSize={10} />

const FILTERS = [
  {
    name: "status",
    type: "select",
    placeholder: "All statuses",
    options: [
      { label: "Active", value: "active" },
      { label: "At Risk", value: "at-risk" },
      { label: "Churned", value: "churned" },
    ],
  },
  { name: "closeDate", type: "dateRange", placeholder: "Close date" },
];

const COLUMNS = [
  { field: "company", label: "Company", sortable: true, footer: "Total",
    renderCell: (val) => <Text format={{ fontWeight: "demibold" }}>{val}</Text> },
  { field: "amount", label: "Amount", sortable: true, align: "right",
    footer: (rows) => formatCurrency(rows.reduce((sum, r) => sum + r.amount, 0)),
    renderCell: (val) => formatCurrency(val) },
];

<DataTable
  data={DEALS}
  columns={COLUMNS}
  filters={FILTERS}
  searchFields={["company"]}
  pageSize={5}
/>

const selectionActions = [
  { label: "Edit", icon: "edit", onClick: (ids) => console.log("Edit", ids) },
  { label: "Delete", icon: "delete", onClick: (ids) => console.log("Delete", ids) },
  { label: "Export", icon: "dataExport", onClick: (ids) => console.log("Export", ids) },
];

<DataTable
  data={COMPANIES}
  columns={columns}
  selectable={true}
  rowIdField="id"
  recordLabel={{ singular: "Company", plural: "Companies" }}
  onSelectionChange={setSelected}
  selectionActions={selectionActions}
  searchFields={["name", "contact"]}
  pageSize={10}
/>

const columns = [
  { field: "company", label: "Company", editable: true, editType: "text",
    renderCell: (val) => <Text format={{ fontWeight: "demibold" }}>{val}</Text> },
  { field: "status", label: "Status", editable: true, editType: "select",
    editOptions: [
      { label: "Active", value: "active" },
      { label: "At Risk", value: "at-risk" },
    ],
    renderCell: (val) => <StatusTag variant={STATUS_COLORS[val]}>{val}</StatusTag> },
  { field: "amount", label: "Amount", editable: true, editType: "currency",
    renderCell: (val) => formatCurrency(val) },
];

<DataTable
  data={data}
  columns={columns}
  rowIdField="id"
  onRowEdit={(row, field, newValue) => handleEdit(row, field, newValue)}
/>

<DataTable
  data={DEALS}
  columns={COLUMNS}
  groupBy={{
    field: "segment",
    label: (value, rows) => `${value} (${rows.length})`,
    sort: "asc",
    defaultExpanded: true,
    aggregations: {
      amount: (rows) => formatCurrency(rows.reduce((sum, r) => sum + r.amount, 0)),
    },
  }}
/>

<DataTable
  data={rows}
  columns={columns}
  rowIdField="id"
  editingRowId={editingRowId}
  onRowEdit={handleCommittedEdit}
  rowActions={(row) => editingRowId === row.id
    ? [{ label: "Done", icon: "success", onClick: () => saveRow(row.id) }]
    : [{ label: "Edit", icon: "edit", onClick: () => setEditingRowId(row.id) }]}
/>

<DataTable data={data} columns={manyColumns} scrollable={true} pageSize={10} />

import { useAssociations } from "@hubspot/ui-extensions/crm";
import { DataTable } from "hs-uix/datatable";

const { results, isLoading } = useAssociations({
  toObjectType: "0-3",
  properties: ["dealname", "dealstage", "amount", "closedate"],
});

const deals = results.map((a) => ({
  id: a.toObjectId,
  dealname: a.properties.dealname,
  amount: Number(a.properties.amount) || 0,
}));

<DataTable data={deals} columns={columns} searchFields={["dealname"]} />

<DataTable
  serverSide={true}
  loading={loading}
  error={error}
  data={pageRows}
  totalCount={totalCount}
  columns={COLUMNS}
  searchFields={["name", "email"]}
  filters={FILTERS}
  pageSize={25}
  page={params.page}
  searchDebounce={300}
  onParamsChange={(p) => fetchData(p)}
/>

import { FormBuilder } from "hs-uix/form";

const fields = [
  { name: "firstName", type: "text", label: "First name", required: true },
  { name: "lastName", type: "text", label: "Last name", required: true },
  { name: "email", type: "text", label: "Email", pattern: /^[^\s@]+@[^\s@]+$/, patternMessage: "Enter a valid email" },
];

<FormBuilder
  columns={2}
  fields={fields}
  onSubmit={(values) => console.log(values)}
/>

<FormBuilder columns={2} fields={fields} />

<FormBuilder columnWidth={200} fields={fields} />

<FormBuilder
  layout={[
    ["firstName", "lastName"],           // 2 equal columns
    ["email"],                           // full width
    ["city", "state", "zip"],            // 3 columns
  ]}
  fields={fields}
/>

layout={[
  [{ field: "address", flex: 2 }, { field: "apt", flex: 1 }],  // 2:1 ratio
]}

{
  name: "email",
  type: "text",
  label: "Email",
  required: true,
  pattern: /^[^\s@]+@[^\s@]+$/,
  patternMessage: "Enter a valid email",
  minLength: 5,
  maxLength: 100,
  validators: [
    (value) => value.endsWith("@example.com") ? true : "Use your company email",
  ],
  validate: async (value, allValues, { signal }) => {
    const exists = await checkEmailExists(value, { signal });
    return exists ? "Email already in use" : true;
  },
}

{
  name: "email",
  type: "text",
  label: "Email",
  validate: async (value, allValues, { signal }) => {
    const exists = await checkEmailExists(value, { signal });
    return exists ? "Email already in use" : true;
  },
  validateDebounce: 500,
}

const fields = [
  { name: "hasCompany", type: "toggle", label: "Has company?" },
  {
    name: "companyName",
    type: "text",
    label: "Company name",
    visible: (values) => values.hasCompany === true,
  },
];

{
  name: "contractLength",
  type: "number",
  label: "Contract length (months)",
  dependsOnConfig: {
    field: "dealType",
    display: "grouped",
    label: "Contract details",
    message: (parentLabel) => `These properties depend on ${parentLabel}`,
  },
  visible: (values) => values.dealType === "recurring",
}

<FormBuilder
  fields={allFields}
  steps={[
    { title: "Contact Info", fields: ["firstName", "lastName", "email"] },
    { title: "Company", fields: ["company", "role"] },
    { title: "Review", render: ({ values, goBack }) => (
      <ReviewPanel values={values} onEdit={goBack} />
    )},
  ]}
  showStepIndicator={true}
  validateStepOnNext={true}
  onSubmit={handleSubmit}
/>

{ name: "phones", type: "repeater", label: "Phone Numbers",
  fields: [
    { name: "number", type: "text", label: "Number" },
    { name: "type", type: "select", label: "Type", options: PHONE_TYPES },
  ],
  min: 1, max: 5 }

<FormBuilder
  fields={fields}
  sections={[
    { id: "basic", label: "Basic Info", fields: ["firstName", "lastName", "email"], defaultOpen: true },
    { id: "social", label: "Social Links", fields: ["facebook", "instagram"], defaultOpen: false },
  ]}
  onSubmit={handleSubmit}
/>

<FormBuilder
  fieldTypes={{
    imageGallery: {
      render: ({ value, onChange, error, field }) => (
        <ImageGalleryInput urls={value} onUpdate={onChange} error={error} />
      ),
      getEmptyValue: () => [],
      isEmpty: (v) => v.length === 0,
    },
  }}
  fields={[
    { name: "photos", type: "imageGallery", label: "Photos", required: true },
  ]}
/>

<FormBuilder
  fields={fields}
  readOnly={isPremiumAccount}
  readOnlyMessage="This is a premium account. Editing is disabled."
  onSubmit={handleSubmit}
/>

<FormBuilder
  fields={fields}
  initialValues={{ firstName: "John" }}
  onSubmit={(values) => save(values)}
/>

const [values, setValues] = useState({});

<FormBuilder
  fields={fields}
  values={values}
  onChange={setValues}
  onSubmit={(values) => save(values)}
/>

const formRef = useRef();

<FormBuilder ref={formRef} fields={fields} onSubmit={save} />

formRef.current.submit();                               // trigger validation + submit
formRef.current.validate();                              // { valid: boolean, errors: {} }
formRef.current.reset();                                 // reset to initial values
formRef.current.getValues();                             // current form values
formRef.current.isDirty();                               // true if values changed
formRef.current.setFieldValue("email", "new@test.com");  // programmatic update
formRef.current.setFieldError("email", "Taken");          // programmatic error
formRef.current.setErrors({ email: "Exists", phone: "Invalid" }); // batch set

<FormBuilder
  fields={fields}
  transformValues={(values) => ({
    ...values,
    fullName: `${values.firstName} ${values.lastName}`.trim(),
  })}
  onBeforeSubmit={async (values) => await showConfirmDialog()}
  onSubmit={saveRecord}
  onSubmitSuccess={(result, { reset }) => actions.addAlert({ type: "success", message: "Saved!" })}
  onSubmitError={(err) => actions.addAlert({ type: "danger", message: err.message })}
  resetOnSuccess={true}
/>

<FormBuilder
  fields={fields}
  onSubmit={save}
  labels={{ submit: "Save record", cancel: "Discard", back: "Previous", next: "Continue" }}
  submitVariant="primary"
  showCancel={true}
  onCancel={() => actions.closeOverlay()}
  loading={isSaving}
  disabled={!canEdit}
/>