feat: ui overhaul (#676)

packages/core/test/data/collection.tsx

@@ -1,54 +0,0 @@
-import type { Collection, MarkdownField } from '@staticcms/core';
-
-export const mockMarkdownField: MarkdownField = {
-  label: 'Body',
-  name: 'body',
-  widget: 'markdown',
-  hint: 'Main content goes here.',
-};
-
-export const mockMarkdownCollection: Collection<MarkdownField> = {
-  name: 'posts',
-  label: 'Posts',
-  label_singular: 'Post',
-  description:
-    'The description is a great place for tone setting, high level information, and editing guidelines that are specific to a collection.\n',
-  folder: '_posts',
-  slug: '{{year}}-{{month}}-{{day}}-{{slug}}',
-  summary: '{{title}} -- {{year}}/{{month}}/{{day}}',
-  sortable_fields: {
-    fields: ['title', 'date'],
-    default: {
-      field: 'title',
-    },
-  },
-  create: true,
-  fields: [
-    {
-      label: 'Title',
-      name: 'title',
-      widget: 'string',
-    },
-    {
-      label: 'Draft',
-      name: 'draft',
-      widget: 'boolean',
-      default: false,
-    },
-    {
-      label: 'Publish Date',
-      name: 'date',
-      widget: 'datetime',
-      date_format: 'yyyy-MM-dd',
-      time_format: 'HH:mm',
-      format: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX",
-    },
-    {
-      label: 'Cover Image',
-      name: 'image',
-      widget: 'image',
-      required: false,
-    },
-    mockMarkdownField,
-  ],
-};

packages/core/test/data/collections.mock.ts

@@ -0,0 +1,31 @@
+/* eslint-disable import/prefer-default-export */
+import type { BaseField, Collection, Field } from '@staticcms/core/interface';
+
+export const createMockCollection = <EF extends BaseField>(
+  extra: Partial<Collection<EF>> = {},
+  ...fields: Field<EF>[]
+): Collection<EF> => ({
+  name: 'mock_collection',
+  label: 'Mock Collections',
+  label_singular: 'Mock Collection',
+  description:
+    'The description is a great place for tone setting, high level information, and editing guidelines that are specific to a collection.\n',
+  folder: 'mock_collection',
+  summary: '{{title}}',
+  sortable_fields: {
+    fields: ['title'],
+    default: {
+      field: 'title',
+    },
+  },
+  create: true,
+  fields: [
+    {
+      label: 'Title',
+      name: 'title',
+      widget: 'string',
+    },
+    ...fields,
+  ],
+  ...extra,
+});

packages/core/test/data/config.mock.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/prefer-default-export */
+import type { BaseField, Config } from '@staticcms/core';
+
+export const createMockConfig = <EF extends BaseField>(
+  options: Omit<Partial<Config<EF>>, 'collections'> & Pick<Config<EF>, 'collections'>,
+): Config<EF> => ({
+  backend: {
+    name: 'test-repo',
+  },
+  ...options,
+});

packages/core/test/data/entry.mock.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/prefer-default-export */
+import type { Entry } from '@staticcms/core';
+
+export const createMockEntry = (
+  options: Omit<Partial<Entry>, 'data'> & Pick<Entry, 'data'>,
+): Entry => ({
+  collection: 'mock_collection',
+  slug: 'slug-value',
+  path: '/path/to/entry',
+  partial: false,
+  raw: JSON.stringify(options.data),
+  label: 'Entry',
+  isModification: false,
+  mediaFiles: [],
+  author: 'Some Person',
+  updatedOn: '20230-02-09T00:00:00.000Z',
+  ...options,
+});

packages/core/test/data/fields.mock.ts

@@ -0,0 +1,84 @@
+import type {
+  BooleanField,
+  DateTimeField,
+  FileOrImageField,
+  MarkdownField,
+  NumberField,
+  RelationField,
+  SelectField,
+  StringOrTextField,
+} from '@staticcms/core';
+
+export const mockBooleanField: BooleanField = {
+  label: 'Boolean',
+  name: 'mock_boolean',
+  widget: 'boolean',
+};
+
+export const mockDateTimeField: DateTimeField = {
+  label: 'DateTime',
+  name: 'mock_datetime',
+  widget: 'datetime',
+};
+
+export const mockDateField: DateTimeField = {
+  label: 'Date',
+  name: 'mock_date',
+  widget: 'datetime',
+  time_format: false,
+};
+
+export const mockTimeField: DateTimeField = {
+  label: 'Time',
+  name: 'mock_time',
+  widget: 'datetime',
+  date_format: false,
+};
+
+export const mockFileField: FileOrImageField = {
+  label: 'File',
+  name: 'mock_file',
+  widget: 'file',
+};
+
+export const mockMarkdownField: MarkdownField = {
+  label: 'Body',
+  name: 'body',
+  widget: 'markdown',
+  hint: 'Main content goes here.',
+};
+
+export const mockNumberField: NumberField = {
+  label: 'Number',
+  name: 'mock_number',
+  widget: 'number',
+};
+
+export const mockRelationField: RelationField = {
+  label: 'Relation',
+  name: 'relation',
+  widget: 'relation',
+  collection: 'posts',
+  display_fields: ['title', 'date'],
+  search_fields: ['title', 'body'],
+  value_field: 'title',
+};
+
+export const mockSelectField: SelectField = {
+  label: 'Select',
+  name: 'mock_select',
+  widget: 'select',
+  options: ['Option 1', 'Option 2', 'Option 3'],
+};
+
+export const mockStringField: StringOrTextField = {
+  label: 'String',
+  name: 'mock_string',
+  widget: 'string',
+};
+
+export const mockTextField: StringOrTextField = {
+  label: 'Text',
+  name: 'mock_text',
+  widget: 'text',
+};

packages/core/test/data/widgets.mock.ts

@@ -0,0 +1,86 @@
+/* eslint-disable import/prefer-default-export */
+import { createMockCollection } from './collections.mock';
+import { createMockConfig } from './config.mock';
+import { createMockEntry } from './entry.mock';
+
+import type {
+  BaseField,
+  UnknownField,
+  ValueOrNestedValue,
+  WidgetControlProps,
+} from '@staticcms/core';
+
+export const createMockWidgetControlProps = <
+  T extends ValueOrNestedValue,
+  F extends BaseField = UnknownField,
+>(
+  options: Omit<
+    Partial<WidgetControlProps<T, F>>,
+    | 'field'
+    | 'data'
+    | 'hasErrors'
+    | 'isFieldDuplicate'
+    | 'isFieldHidden'
+    | 'onChange'
+    | 'clearMediaControl'
+    | 'openMediaLibrary'
+    | 'removeInsertedMedia'
+    | 'removeMediaControl'
+    | 'query'
+    | 't'
+  > &
+    Pick<WidgetControlProps<T, F>, 'field'>,
+): WidgetControlProps<T, F> => {
+  const {
+    value: rawValue,
+    path: rawPath,
+    errors: rawErrors,
+    fieldsErrors: rawFieldsErrors,
+    collection: rawCollection,
+    config: rawConfig,
+    entry: rawEntry,
+    ...extra
+  } = options;
+
+  const value = rawValue ?? null;
+
+  const collection = rawCollection ?? createMockCollection({}, options.field);
+  const config = rawConfig ?? createMockConfig({ collections: [collection] });
+  const entry = rawEntry ?? createMockEntry({ data: { [options.field.name]: value } });
+
+  const path = rawPath ?? '';
+  const errors = rawErrors ?? [];
+  const fieldsErrors =
+    rawFieldsErrors ?? (rawErrors ? { [`${path}.${options.field.name}`]: errors } : {});
+  const hasErrors = Boolean(rawErrors && rawErrors.length > 0);
+
+  return {
+    label: 'Mock Widget',
+    config,
+    collection,
+    entry,
+    value,
+    path,
+    mediaPaths: {},
+    fieldsErrors,
+    errors,
+    hasErrors,
+    submitted: false,
+    forList: false,
+    forSingleList: false,
+    disabled: false,
+    locale: undefined,
+    i18n: undefined,
+    duplicate: false,
+    hidden: false,
+    theme: 'light',
+    onChange: jest.fn(),
+    clearMediaControl: jest.fn(),
+    openMediaLibrary: jest.fn(),
+    removeInsertedMedia: jest.fn(),
+    removeMediaControl: jest.fn(),
+    query: jest.fn(),
+    t: jest.fn(),
+    ...extra,
+  };
+};