Shopify Polaris — Design System

// app.tsx — Embedded Shopify app com Polaris + App Bridge
import { AppProvider, Page, Card, Button, TextField, BlockStack } from '@shopify/polaris'
import '@shopify/polaris/build/esm/styles.css'
import enTranslations from '@shopify/polaris/locales/en.json'
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react'
import { useState } from 'react'

export default function App({ host, apiKey }: { host: string; apiKey: string }) {
  return (
    <AppBridgeProvider config={{ host, apiKey, forceRedirect: true }}>
      <AppProvider i18n={enTranslations}>
        <Settings />
      </AppProvider>
    </AppBridgeProvider>
  )
}

function Settings() {
  const [name, setName] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSave = async () => {
    setLoading(true)
    await fetch('/api/settings', { method: 'POST', body: JSON.stringify({ name }) })
    setLoading(false)
  }

  return (
    <Page
      title="Configurações"
      primaryAction={{ content: 'Salvar', onAction: handleSave, loading }}
      backAction={{ content: 'Apps', url: '/' }}
    >
      <Card>
        <BlockStack gap="400">
          <TextField
            label="Nome da loja"
            value={name}
            onChange={setName}
            autoComplete="off"
            helpText="Exibido em emails de confirmação"
          />
          <Button onClick={handleSave} loading={loading} variant="primary">
            Salvar alterações
          </Button>
        </BlockStack>
      </Card>
    </Page>
  )
}