chore: cherry-pick additional interfaces

Author: matthewvolk

core/ui/address-list-section/index.tsx

@@ -0,0 +1,175 @@
+import { type SubmissionResult } from '@conform-to/react';
+
+type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;
+
+interface FormField {
+  name: string;
+  label?: string;
+  errors?: string[];
+  required?: boolean;
+  id?: string;
+}
+
+type RadioField = {
+  type: 'radio-group';
+  options: Array<{ label: string; value: string }>;
+  defaultValue?: string;
+} & FormField;
+
+type CheckboxField = {
+  type: 'checkbox';
+  defaultValue?: string;
+} & FormField;
+
+type CheckboxGroupField = {
+  type: 'checkbox-group';
+  options: Array<{ label: string; value: string }>;
+  defaultValue?: string[];
+} & FormField;
+
+type NumberInputField = {
+  type: 'number';
+  defaultValue?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  incrementLabel?: string;
+  decrementLabel?: string;
+} & FormField;
+
+type TextInputField = {
+  type: 'text';
+  defaultValue?: string;
+} & FormField;
+
+type TextAreaField = {
+  type: 'textarea';
+  defaultValue?: string;
+} & FormField;
+
+type DateField = {
+  type: 'date';
+  defaultValue?: string;
+  minDate?: string;
+  maxDate?: string;
+} & FormField;
+
+type SwatchRadioFieldOption =
+  | {
+      type: 'color';
+      value: string;
+      label: string;
+      color: string;
+      disabled?: boolean;
+    }
+  | {
+      type: 'image';
+      value: string;
+      label: string;
+      image: { src: string; alt: string };
+      disabled?: boolean;
+    };
+
+type SwatchRadioField = {
+  type: 'swatch-radio-group';
+  defaultValue?: string;
+  options: SwatchRadioFieldOption[];
+} & FormField;
+
+type CardRadioField = {
+  type: 'card-radio-group';
+  defaultValue?: string;
+  options: Array<{
+    value: string;
+    label: string;
+    image: { src: string; alt: string };
+    disabled?: boolean;
+  }>;
+} & FormField;
+
+type ButtonRadioField = {
+  type: 'button-radio-group';
+  defaultValue?: string;
+  pattern?: string;
+  options: Array<{
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }>;
+} & FormField;
+
+type SelectField = {
+  type: 'select';
+  options: Array<{ label: string; value: string }>;
+  defaultValue?: string;
+} & FormField;
+
+type PasswordField = {
+  type: 'password';
+} & FormField;
+
+type ConfirmPasswordField = {
+  type: 'confirm-password';
+} & FormField;
+
+type EmailInputField = {
+  type: 'email';
+  defaultValue?: string;
+} & FormField;
+
+type HiddenInputField = {
+  type: 'hidden';
+  defaultValue?: string;
+} & FormField;
+
+type Field =
+  | RadioField
+  | CheckboxField
+  | CheckboxGroupField
+  | NumberInputField
+  | TextInputField
+  | TextAreaField
+  | DateField
+  | SwatchRadioField
+  | CardRadioField
+  | ButtonRadioField
+  | SelectField
+  | PasswordField
+  | ConfirmPasswordField
+  | EmailInputField
+  | HiddenInputField;
+
+type FieldGroup<F> = F[];
+
+interface Address {
+  [key: string]: unknown;
+  id: string;
+  firstName: string;
+  lastName: string;
+  company?: string | undefined;
+  address1: string;
+  address2?: string | undefined;
+  city: string;
+  stateOrProvince?: string | undefined;
+  postalCode?: string | undefined;
+  phone?: string | undefined;
+  countryCode: string;
+}
+
+interface DefaultAddressConfiguration {
+  id: string | null;
+}
+
+interface AddressListState<A extends Address, F extends Field> {
+  addresses: A[];
+  defaultAddress?: DefaultAddressConfiguration;
+  lastResult: SubmissionResult | null;
+  fields: Array<F | FieldGroup<F>>;
+}
+
+export interface AddressListData<A extends Address, F extends Field> {
+  addresses: A[];
+  fields: Array<F | FieldGroup<F>>;
+  defaultAddress?: DefaultAddressConfiguration;
+  addressAction: Action<AddressListState<A, F>, FormData>;
+}

core/ui/blog-post-content/index.tsx

@@ -0,0 +1,33 @@
+import { type Streamable } from '@/vibes/soul/lib/streamable';
+
+interface Breadcrumb {
+  label: string;
+  href: string;
+}
+
+interface Tag {
+  label: string;
+  link: {
+    href: string;
+    target?: string;
+  };
+}
+
+interface Image {
+  src: string;
+  alt: string;
+}
+
+interface BlogPostContentBlogPost {
+  title: string;
+  author?: string;
+  date: string;
+  tags?: Tag[];
+  content: string;
+  image?: Image;
+}
+
+export interface BlogPostContentData {
+  blogPost: Streamable<BlogPostContentBlogPost>;
+  breadcrumbs?: Streamable<Breadcrumb[]>;
+}

core/ui/blog-post-list/index.tsx

@@ -0,0 +1,18 @@
+import { type Streamable } from '@/vibes/soul/lib/streamable';
+
+interface BlogPostCardBlogPost {
+  id: string;
+  author?: string | null;
+  content: string;
+  date: string;
+  image?: {
+    src: string;
+    alt: string;
+  };
+  href: string;
+  title: string;
+}
+
+export interface BlogPostListData {
+  posts: Streamable<BlogPostCardBlogPost[]>;
+}

core/ui/breadcrumbs/index.tsx

@@ -0,0 +1,10 @@
+import { type Streamable } from '@/vibes/soul/lib/streamable';
+
+interface Breadcrumb {
+  label: string;
+  href: string;
+}
+
+export interface BreadcrumbsData {
+  breadcrumbs: Streamable<Breadcrumb[]>;
+}

core/ui/cart/index.tsx

@@ -0,0 +1,96 @@
+import { type SubmissionResult } from '@conform-to/react';
+
+import { type Streamable } from '@/vibes/soul/lib/streamable';
+
+type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;
+
+interface CartLineItem {
+  id: string;
+  image: { alt: string; src: string };
+  title: string;
+  subtitle: string;
+  quantity: number;
+  price: string;
+}
+
+interface CartSummaryItem {
+  label: string;
+  value: string;
+}
+
+interface CartDataData<LineItem extends CartLineItem = CartLineItem> {
+  lineItems: LineItem[];
+  summaryItems: CartSummaryItem[];
+  total: string;
+}
+
+interface CartState<LineItem extends CartLineItem = CartLineItem> {
+  lineItems: LineItem[];
+  lastResult: SubmissionResult | null;
+}
+
+interface CouponCodeState {
+  couponCodes: string[];
+  lastResult: SubmissionResult | null;
+}
+
+interface CouponCode {
+  action: Action<CouponCodeState, FormData>;
+  couponCodes?: string[];
+}
+
+interface Address {
+  country: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+}
+
+interface ShippingOption {
+  label: string;
+  value: string;
+  price: string;
+}
+
+interface ShippingState {
+  lastResult: SubmissionResult | null;
+  address: Address | null;
+  shippingOptions: ShippingOption[] | null;
+  shippingOption: ShippingOption | null;
+  form: 'address' | 'shipping' | null;
+}
+
+interface Country {
+  label: string;
+  value: string;
+}
+
+interface States {
+  country: string;
+  states: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+interface Shipping {
+  action: Action<ShippingState, FormData>;
+  countries: Country[];
+  states: States[];
+  address?: Address;
+  shippingOptions?: ShippingOption[];
+  shippingOption?: ShippingOption;
+}
+
+export interface CartData<
+  LineItem extends CartLineItem = CartLineItem,
+  Data extends CartDataData<LineItem> = CartDataData<LineItem>,
+  Coupon extends CouponCode = CouponCode,
+  ShippingInfo extends Shipping = Shipping,
+> {
+  lineItemAction: Action<CartState<LineItem>, FormData>;
+  checkoutAction: Action<SubmissionResult | null, FormData>;
+  cart: Streamable<Data>;
+  couponCode?: Coupon;
+  shipping?: ShippingInfo;
+}

core/ui/compare-section/index.tsx

@@ -0,0 +1,51 @@
+import { type SubmissionResult } from '@conform-to/react';
+import { type ReactNode } from 'react';
+
+import { type Streamable } from '@/vibes/soul/lib/streamable';
+
+type Action<State, Payload> = (state: Awaited<State>, payload: Payload) => State | Promise<State>;
+
+interface PriceRange {
+  type: 'range';
+  minValue: string;
+  maxValue: string;
+}
+
+interface PriceSale {
+  type: 'sale';
+  previousValue: string;
+  currentValue: string;
+}
+
+type Price = string | PriceRange | PriceSale;
+
+interface Product {
+  id: string;
+  title: string;
+  href: string;
+  image?: { src: string; alt: string };
+  price?: Price;
+  subtitle?: string;
+  badge?: string;
+  rating?: number;
+}
+
+interface CompareCardWithId extends Product {
+  description?: string | React.ReactNode;
+  customFields?: Array<{ name: string; value: string }>;
+  hasVariants?: boolean;
+  disabled?: boolean;
+  isPreorder?: boolean;
+}
+
+interface CompareAddToCartState {
+  lastResult: SubmissionResult | null;
+  successMessage?: ReactNode;
+}
+
+type CompareAddToCartAction = Action<CompareAddToCartState, FormData>;
+
+export interface CompareSectionData {
+  products: Streamable<CompareCardWithId[]>;
+  addToCartAction: CompareAddToCartAction;
+}