@wix/patterns 1.360.0 → 1.364.0

package/src/utils/fieldTypePrefixIcons.tsx

@@ -0,0 +1,164 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import {
+  Text,
+  TextSmall,
+  Image,
+  ImageSmall,
+  SquareRatioChecked,
+  SquareRatioCheckedSmall,
+  Number,
+  NumberSmall,
+  Date,
+  DateSmall,
+  DateAndTime,
+  DateAndTimeSmall,
+  Time,
+  TimeSmall,
+  Article,
+  ArticleSmall,
+  RichText,
+  RichTextSmall,
+  Reference,
+  ReferenceSmall,
+  Multireference,
+  MultireferenceSmall,
+  Link,
+  LinkSmall,
+  Document,
+  DocumentSmall,
+  DocDuplicate,
+  Music,
+  MusicSmall,
+  Location,
+  LocationSmall,
+  Tag,
+  TagSmall,
+  CodeObject,
+  CodeObjectSmall,
+  ProGalleries,
+  ProGalleriesSmall,
+  Email,
+  EmailSmall,
+  Database,
+  DatabaseSmall,
+} from '@wix/wix-ui-icons-common';
+
+/**
+ * Canonical field type keys (UPPER_SNAKE_CASE).
+ * The map is keyed by these values; incoming camelCase strings
+ * are normalised before lookup.
+ */
+export type FieldType =
+  | 'SHORT_TEXT'
+  | 'LONG_TEXT'
+  | 'NUMBER'
+  | 'BOOLEAN'
+  | 'DATE'
+  | 'DATE_TIME'
+  | 'DATETIME'
+  | 'TIME'
+  | 'URL'
+  | 'EMAIL'
+  | 'IMAGE'
+  | 'MEDIA_GALLERY'
+  | 'AUDIO'
+  | 'DOCUMENT'
+  | 'MULTI_DOCUMENT'
+  | 'RICH_TEXT'
+  | 'RICH_CONTENT'
+  | 'REFERENCE'
+  | 'MULTI_REFERENCE'
+  | 'OBJECT'
+  | 'ARRAY'
+  | 'ADDRESS'
+  | 'COLOR'
+  | 'INTEGER'
+  | 'DECIMAL'
+  | 'CHECKBOX'
+  | 'DROPDOWN'
+  | 'FILES'
+  | 'MULTI_SELECT';
+
+/**
+ * Converts any casing (camelCase, snake_case, etc.) to a canonical FieldType.
+ * e.g. "shortText" → "SHORT_TEXT", "dateTime" → "DATE_TIME".
+ * Already UPPER_SNAKE_CASE strings pass through unchanged.
+ */
+export function toFieldType(value: string): FieldType {
+  return value.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase() as FieldType;
+}
+
+interface FieldPrefixIconEntry {
+  small: ComponentType;
+  medium: ComponentType;
+}
+
+/**
+ * Maps canonical UPPER_SNAKE_CASE field types to icon components (small + medium).
+ */
+const FIELD_TYPE_ICON_MAP: Partial<Record<FieldType, FieldPrefixIconEntry>> = {
+  SHORT_TEXT: { small: TextSmall, medium: Text },
+  LONG_TEXT: { small: TextSmall, medium: Text },
+  NUMBER: { small: NumberSmall, medium: Number },
+  BOOLEAN: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },
+  DATE: { small: DateSmall, medium: Date },
+  DATE_TIME: { small: DateAndTimeSmall, medium: DateAndTime },
+  DATETIME: { small: DateAndTimeSmall, medium: DateAndTime },
+  TIME: { small: TimeSmall, medium: Time },
+  URL: { small: LinkSmall, medium: Link },
+  EMAIL: { small: EmailSmall, medium: Email },
+  IMAGE: { small: ImageSmall, medium: Image },
+  MEDIA_GALLERY: { small: ProGalleriesSmall, medium: ProGalleries },
+  AUDIO: { small: MusicSmall, medium: Music },
+  DOCUMENT: { small: DocumentSmall, medium: Document },
+  MULTI_DOCUMENT: { small: DocumentSmall, medium: DocDuplicate },
+  RICH_TEXT: { small: RichTextSmall, medium: RichText },
+  RICH_CONTENT: { small: ArticleSmall, medium: Article },
+  REFERENCE: { small: ReferenceSmall, medium: Reference },
+  MULTI_REFERENCE: { small: MultireferenceSmall, medium: Multireference },
+  OBJECT: { small: CodeObjectSmall, medium: CodeObject },
+  ARRAY: { small: TagSmall, medium: Tag },
+  ADDRESS: { small: LocationSmall, medium: Location },
+  INTEGER: { small: NumberSmall, medium: Number },
+  DECIMAL: { small: NumberSmall, medium: Number },
+  CHECKBOX: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },
+  FILES: { small: DocumentSmall, medium: Document },
+  MULTI_SELECT: { small: TagSmall, medium: Tag },
+};
+
+/**
+ * Returns an icon ReactNode for the given field type string and size.
+ * Accepts both UPPER_SNAKE_CASE and camelCase input.
+ * If the field type is not mapped (or undefined), returns an info fallback icon.
+ *
+ * @param fieldType - The field type string
+ * @param size - 'small' (default, for column headers / customize panel) or 'medium' (for filters)
+ */
+const ICON_STYLE: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  color: 'var(--wds-color-text-standard-primary, #000624)',
+};
+
+export function getFieldTypeIcon({
+  fieldType,
+  size = 'small',
+}: {
+  fieldType?: FieldType;
+  size?: 'small' | 'medium';
+}): ReactNode {
+  const Fallback = size === 'medium' ? Database : DatabaseSmall;
+
+  if (!fieldType) {
+    return <span style={ICON_STYLE}><Fallback /></span>;
+  }
+
+  const entry = FIELD_TYPE_ICON_MAP[fieldType];
+
+  if (!entry) {
+    return <span style={ICON_STYLE}><Fallback /></span>;
+  }
+
+  const Icon = size === 'medium' ? entry.medium : entry.small;
+  return <span style={ICON_STYLE}><Icon /></span>;
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.360.0';
+export const version = 'patterns@1.364.0';