@pack/types: TypeScript Type Definitions – Pack Digital

The @pack/types provides TypeScript definitions for Pack projects, enabling strong type-checking of sections and data to enhance code quality and developer productivity.

Quick Start

Install with a package manager:

npm install @pack/types

Here is a list of exports from this package:

import type {
  Section,
  SectionSchema,
  SectionMap,
  SectionObjectSchema,
  SiteSetting,
  TextField,
  TextAreaField,
  ImageField,
  MarkdownField,
  LinkField,
  NumberField,
  ColorField,
  DateField,
  ProductSearchField,
  CollectionsField,
  ProductBundlesField,
  HtmlField,
  TagsField,
  GroupField,
  ListField,
  GroupListField,
  BlocksField,
  ToggleField,
  RadioGroupField,
} from '@pack/types';

Typing Your Sections For Validation

You can utilize @pack/types for both section and storefront setting schemas validation. Validation errors will be logged in terminal upon running your storefront.

Start by typing your section and storefront settings schemas by importing the Section and SiteSetting from @pack/types which are now expected when using @pack/react registerSection() and registerStorefrontSettingsSchema().

When using registerSection, type the passed in section schema, for example:

/sections/index.ts

    import {registerSection} from '@pack/react';
    import type {Section} from '@pack/types';

    export function registerSections() {
      registerSection(TabbedThreeTiles as Section, {name: 'tabbed-three-tiles'});
      registerSection(ThreeTiles as Section, {name: 'three-tiles'});
      registerSection(TwoTiles as Section, {name: 'two-tiles'});
    }

When using registerStorefrontSettings, type the passed in site setting schema, for example:

/storefront-settings/index.ts

    import {registerStorefrontSettingsSchema} from '@pack/react';
    import type {SiteSetting} from '@pack/types';

    export function registerStorefrontSettings() {
      registerStorefrontSettingsSchema([
        account as SiteSetting,
        analytics as SiteSetting,
        cart as SiteSetting,
        collection as SiteSetting,
        footer as SiteSetting,
      ]);
    }

Core Schema Types

Section: The base interface for all section components. Sections are the building blocks of pages in Pack.

interface Section {
  component: React.ComponentType<any>
  schema: SectionSchema
}

SectionSchema: Defines the configuration structure for a section, including its settings and blocks.

interface SectionSchema {
  name: string
  settings: FieldSchema[]
  blocks?: BlockSchema[]
  max_blocks?: number
  presets?: SectionPreset[]
}

SectionMap: A mapping type that connects section names to their corresponding section components.

type SectionMap = {
  [key: string]: Section
}

SectionObjectSchema: Defines the schema for section objects, which can include settings and blocks.

interface SectionObjectSchema {
  type: 'section'
  settings: FieldSchema[]
}

SiteSetting: Defines global site-wide settings

interface SiteSetting {
  type: string
  id: string
  label: string
  category: string
  default?: any
}

Field Types

These are the available field types for section and settings schemas:

Text & Content Fields

TextField: Single-line text input field

interface TextField {
  type: 'text'
  id: string
  label: string
  default?: string
  placeholder?: string
}

TextAreaField: Multi-line text input field

interface TextAreaField {
  type: 'textarea'
  id: string
  label: string
  default?: string
  rows?: number
}

MarkdownField: Rich text editor with markdown support

interface MarkdownField {
  type: 'markdown'
  id: string
  label: string
  default?: string
}

HtmlField: HTML content editor

interface HtmlField {
  type: 'html'
  id: string
  label: string
  default?: string
}

TagsField: Input field for managing tags/labels

interface TagsField {
  type: 'tags'
  id: string
  label: string
  default?: string[]
}

Media Fields

ImageField: Image upload and selection field

interface ImageField {
  type: 'image'
  id: string
  label: string
  default?: string
  max_size?: number
  allowed_extensions?: string[]
}

LinkField: URL/link input field

interface LinkField {
  type: 'link'
  id: string
  label: string
  default?: {
    url: string
    text?: string
    target?: '_blank' | '_self'
  }
}

Numeric & Date Fields

NumberField: Numeric input field

interface NumberField {
  type: 'number'
  id: string
  label: string
  default?: number
  min?: number
  max?: number
  step?: number
}

DateField: Date picker field

interface DateField {
  type: 'date'
  id: string
  label: string
  default?: string
  format?: string
}

ColorField: Color selector field

interface ColorField {
  type: 'color'
  id: string
  label: string
  default?: string
  opacity?: boolean
}

Product & Collection Fields

ProductSearchField: Search and select products

interface ProductSearchField {
  type: 'product_search'
  id: string
  label: string
  multi_select?: boolean
}

CollectionsField: Select from available collections

interface CollectionsField {
  type: 'collections'
  id: string
  label: string
  multi_select?: boolean
}

ProductBundlesField: Select and configure product bundles

interface ProductBundlesField {
  type: 'product_bundles'
  id: string
  label: string
  multi_select?: boolean
}

Group & List Fields

GroupField: Container for grouping related fields

interface GroupField {
  type: 'group'
  id: string
  label: string
  fields: FieldSchema[]
}

ListField: Repeatable field for creating lists

interface ListField {
  type: 'list'
  id: string
  label: string
  field: FieldSchema
  max_items?: number
}

GroupListField: Repeatable group of fields

interface GroupListField {
  type: 'group_list'
  id: string
  label: string
  fields: FieldSchema[]
  max_items?: number
}

BlocksField: Dynamic blocks of content with different schemas

interface BlocksField {
  type: 'blocks'
  id: string
  label: string
  blocks: BlockSchema[]
  max_blocks?: number
}

Selection Fields

ToggleField: Boolean on/off toggle

interface ToggleField {
  type: 'toggle'
  id: string
  label: string
  default?: boolean
}

RadioGroupField: Select one option from multiple choices

interface RadioGroupField {
  type: 'radio_group'
  id: string
  label: string
  options: {
    label: string
    value: string
  }[]
  default?: string
}