// app/root.tsx
import { FormProvider } from '@tempered/hydrogen-forms';

export default function App() {
  return (
    <FormProvider
      config={{
        apiUrl: 'https://formbridge.temperedtools.xyz',
        shopDomain: 'your-store.myshopify.com',
      }}
    >
      <Outlet />
    </FormProvider>
  );
}

// app/routes/contact.tsx
import { ContactForm } from '@tempered/hydrogen-forms';

export default function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <ContactForm
        formId="form_abc123"
        showSubject
        onSuccess={(response) => console.log('Submitted:', response.submissionId)}
      />
    </div>
  );
}

// app/components/Footer.tsx
import { NewsletterSignup } from '@tempered/hydrogen-forms';

export function Footer() {
  return (
    <footer>
      <NewsletterSignup
        formId="form_newsletter"
        inline
        placeholder="your@email.com"
        buttonText="Subscribe"
      />
    </footer>
  );
}

<FormProvider
  config={{
    apiUrl: 'https://formbridge.temperedtools.xyz',
    shopDomain: 'your-store.myshopify.com',
    apiKey: 'optional_api_key', // For authenticated requests
  }}
>
  {children}
</FormProvider>

<ContactForm
  formId="form_id"
  showSubject={true}
  onSuccess={(response) => {}}
  onError={(error) => {}}
  classNames={{
    form: 'my-form',
    field: 'form-field',
    input: 'form-input',
    button: 'submit-btn',
  }}
  labels={{
    name: 'Your Name',
    email: 'Email Address',
    submit: 'Send Message',
  }}
/>

<NewsletterSignup
  formId="form_id"
  inline={true}
  placeholder="Enter your email"
  buttonText="Subscribe"
  successMessage="Thanks for subscribing!"
/>

<CustomForm
  formId="form_id"
  onSuccess={(response) => {}}
  submitText="Submit"
  loadingText="Submitting..."
  renderLoading={() => <div>Loading form...</div>}
/>

<FormField
  name="email"
  label="Email Address"
  type="email"
  value={value}
  onChange={handleChange}
  onBlur={handleBlur}
  required
  error={error}
  touched={touched}
/>

const form = useForm({
  initialValues: { name: '', email: '' },
  fields: [
    { id: '1', name: 'name', label: 'Name', type: 'text', required: true, sortOrder: 0 },
    { id: '2', name: 'email', label: 'Email', type: 'email', required: true, sortOrder: 1 },
  ],
});

// Use form state
form.getValue('email');
form.setValue('email', 'test@example.com');
form.getError('email');
form.validate();
form.getFieldProps('email'); // { name, value, onChange, onBlur }

const { submit, isSubmitting, error, response } = useSubmit({
  formId: 'form_id',
  onSuccess: (response) => console.log('Success:', response),
  onError: (error) => console.error('Error:', error),
});

await submit({ name: 'John', email: 'john@example.com' });

const { validate, validateSingle, isRequired } = useValidation({
  fields: formConfig.fields,
});

const result = validate(formValues);
// { isValid: boolean, errors: { fieldName: 'error message' } }

const { config, isLoading, error, refetch } = useFetchFormConfig({
  formId: 'form_id',
});

// app/routes/contact.tsx
import { fetchFormConfig, submitForm, createFormBridgeConfig } from '@tempered/hydrogen-forms/server';

export async function loader({ context }) {
  const config = await fetchFormConfig({
    formId: 'form_id',
    apiUrl: 'https://formbridge.temperedtools.xyz',
  });

  return { formConfig: config };
}

export async function action({ request, context }) {
  const formData = await request.formData();

  const result = await submitForm({
    formId: 'form_id',
    data: Object.fromEntries(formData),
    config: createFormBridgeConfig({
      shopDomain: context.env.PUBLIC_STORE_DOMAIN,
    }),
  });

  return result;
}

<ContactForm
  formId="form_id"
  classNames={{
    form: 'contact-form',
    field: 'form-group',
    input: 'form-control',
    label: 'form-label',
    error: 'invalid-feedback',
    button: 'btn btn-primary',
    successMessage: 'alert alert-success',
    errorMessage: 'alert alert-danger',
  }}
/>

import type {
  FormBridgeConfig,
  FormConfig,
  FormField,
  FieldType,
  SubmissionResponse,
  ContactFormProps,
  UseFormReturn,
} from '@tempered/hydrogen-forms';