@purestack/ts-components 1.1.0

package/src/standard/contactForm/contactForm.ts

@@ -0,0 +1,135 @@
+import { defineComponent, html } from 'regor'
+
+export type ContactFormMethod = 'get' | 'post'
+
+export interface ContactForm {
+  title?: string
+  description?: string
+  action?: string
+  method?: ContactFormMethod
+  submitLabel?: string
+  nameLabel?: string
+  emailLabel?: string
+  topicLabel?: string
+  messageLabel?: string
+  namePlaceholder?: string
+  emailPlaceholder?: string
+  messagePlaceholder?: string
+  topicGeneralLabel?: string
+  topicSupportLabel?: string
+  topicPartnershipLabel?: string
+  resolvedMethod?: ContactFormMethod
+}
+
+const contactFormTemplate = html`<section class="contact-form">
+  <div class="contact-form__header">
+    <h3 class="contact-form__title">{{ title }}</h3>
+    <p class="contact-form__description">{{ description }}</p>
+  </div>
+  <form
+    class="contact-form__form"
+    :action="action"
+    :method="resolvedMethod"
+    enctype="text/plain"
+  >
+    <label class="contact-form__field">
+      <span class="contact-form__label">{{ nameLabel }}</span>
+      <input
+        class="contact-form__input"
+        type="text"
+        name="name"
+        :placeholder="namePlaceholder"
+        required
+        autocomplete="name"
+      />
+    </label>
+    <label class="contact-form__field">
+      <span class="contact-form__label">{{ emailLabel }}</span>
+      <input
+        class="contact-form__input"
+        type="email"
+        name="email"
+        :placeholder="emailPlaceholder"
+        required
+        autocomplete="email"
+      />
+    </label>
+    <label class="contact-form__field">
+      <span class="contact-form__label">{{ topicLabel }}</span>
+      <select class="contact-form__select" name="topic" required>
+        <option>{{ topicGeneralLabel }}</option>
+        <option>{{ topicSupportLabel }}</option>
+        <option>{{ topicPartnershipLabel }}</option>
+      </select>
+    </label>
+    <label class="contact-form__field">
+      <span class="contact-form__label">{{ messageLabel }}</span>
+      <textarea
+        class="contact-form__textarea"
+        name="message"
+        rows="6"
+        :placeholder="messagePlaceholder"
+        required
+      ></textarea>
+    </label>
+    <div class="contact-form__actions">
+      <Btn type="submit">
+        {{ submitLabel }}
+      </Btn>
+    </div>
+  </form>
+</section>`
+
+function defineContactFormComponent() {
+  return defineComponent<ContactForm>(contactFormTemplate, {
+    props: [
+      'title',
+      'description',
+      'action',
+      'method',
+      'submitLabel',
+      'nameLabel',
+      'emailLabel',
+      'topicLabel',
+      'messageLabel',
+      'namePlaceholder',
+      'emailPlaceholder',
+      'messagePlaceholder',
+      'topicGeneralLabel',
+      'topicSupportLabel',
+      'topicPartnershipLabel',
+    ],
+    context: (head) => resolveContactForm(head.props),
+  })
+}
+
+export function defineContactFormComponents() {
+  return {
+    contactForm: defineContactFormComponent(),
+  }
+}
+
+function resolveContactForm(props: ContactForm): ContactForm {
+  const normalizedMethod = props.method?.trim().toLowerCase()
+  return {
+    title: props.title || 'Send a message',
+    description:
+      props.description ||
+      'Share context and goals so we can route your request quickly.',
+    action: props.action || 'mailto:team@purestack.dev',
+    method: props.method || 'post',
+    resolvedMethod: normalizedMethod === 'get' ? 'get' : 'post',
+    submitLabel: props.submitLabel || 'Send Message',
+    nameLabel: props.nameLabel || 'Name',
+    emailLabel: props.emailLabel || 'Email',
+    topicLabel: props.topicLabel || 'Topic',
+    messageLabel: props.messageLabel || 'Message',
+    namePlaceholder: props.namePlaceholder || 'Your name',
+    emailPlaceholder: props.emailPlaceholder || 'name@company.com',
+    messagePlaceholder:
+      props.messagePlaceholder || 'Tell us what you are trying to solve.',
+    topicGeneralLabel: props.topicGeneralLabel || 'General inquiry',
+    topicSupportLabel: props.topicSupportLabel || 'Technical support',
+    topicPartnershipLabel: props.topicPartnershipLabel || 'Partnership',
+  }
+}

package/src/standard/contactForm/contactFormStyle.ts

@@ -0,0 +1,116 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import {
+  BREAKPOINTS,
+  mediaMax,
+  styleBuilder,
+  type ThemeMode,
+  themes,
+} from '@purestack/ts-style'
+
+export function registerContactFormStyles() {
+  themes.forEach((theme, palette) => {
+    registerContactFormShellStyles(theme, palette)
+    registerContactFormFieldStyles(theme, palette)
+    registerContactFormActionStyles(theme)
+    registerContactFormResponsiveStyles(theme)
+  })
+}
+
+function registerContactFormShellStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.contact-form', theme)
+    .margin('1.25rem 0 0')
+    .padding('1.125rem')
+    .display('grid')
+    .gap('0.875rem')
+    .borderRadius(palette.radii.lg)
+    .background(palette.current.surface.rest.background)
+    .border(`1px solid ${palette.current.border.default}`)
+    .boxShadow(palette.effect.panelShadow)
+  styleBuilder
+    .select('.contact-form__header', theme)
+    .display('grid')
+    .gap('0.375rem')
+  styleBuilder
+    .select('.contact-form__title', theme)
+    .margin('0')
+    .fontSize('1.05rem')
+    .fontWeight('760')
+    .letterSpacing('-0.01em')
+    .color(palette.current.text.default)
+  styleBuilder
+    .select('.contact-form__description', theme)
+    .margin('0')
+    .fontSize('0.93rem')
+    .lineHeight('1.6')
+    .color(palette.current.text.subtle)
+  styleBuilder
+    .select('.contact-form__form', theme)
+    .display('grid')
+    .gap('0.625rem')
+}
+
+function registerContactFormFieldStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.contact-form__field', theme)
+    .display('grid')
+    .gap('0.375rem')
+  styleBuilder
+    .select('.contact-form__label', theme)
+    .fontSize('0.86rem')
+    .fontWeight('700')
+    .color(palette.current.text.default)
+  styleBuilder
+    .select(
+      '.contact-form__input, .contact-form__select, .contact-form__textarea',
+      theme,
+    )
+    .width('100%')
+    .padding('0.625rem 0.75rem')
+    .borderRadius(palette.radii.md)
+    .border(`1px solid ${palette.current.border.default}`)
+    .background(palette.current.surfaceAlt.rest.background)
+    .color(palette.current.text.default)
+    .fontSize('0.92rem')
+    .lineHeight('1.45')
+    .boxSizing('border-box')
+    .appearance('none')
+  styleBuilder
+    .select('.contact-form__textarea', theme)
+    .resize('vertical')
+    .minHeight('8.25rem')
+  styleBuilder
+    .select(
+      '.contact-form__input::placeholder, .contact-form__textarea::placeholder',
+      theme,
+    )
+    .color(palette.current.text.subtle)
+  styleBuilder
+    .select(
+      '.contact-form__input:focus-visible, .contact-form__select:focus-visible, .contact-form__textarea:focus-visible',
+      theme,
+    )
+    .outline(`2px solid ${palette.current.border.focus}`)
+    .borderColor(palette.current.border.default)
+}
+
+function registerContactFormActionStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.contact-form__actions', theme)
+    .display('flex')
+    .justifyContent('flex-start')
+    .paddingTop('0.125rem')
+}
+
+function registerContactFormResponsiveStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.contact-form', theme)
+    .media(mediaMax(BREAKPOINTS.sm))
+    .padding('0.875rem')
+}