feat: ui overhaul (#676)
This commit is contained in:
committed by
GitHub
parent
5c86462859
commit
66b81e9228
@ -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,
|
||||
],
|
||||
};
|
31
packages/core/test/data/collections.mock.ts
Normal file
31
packages/core/test/data/collections.mock.ts
Normal file
@ -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,
|
||||
});
|
11
packages/core/test/data/config.mock.ts
Normal file
11
packages/core/test/data/config.mock.ts
Normal file
@ -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,
|
||||
});
|
18
packages/core/test/data/entry.mock.ts
Normal file
18
packages/core/test/data/entry.mock.ts
Normal file
@ -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,
|
||||
});
|
84
packages/core/test/data/fields.mock.ts
Normal file
84
packages/core/test/data/fields.mock.ts
Normal file
@ -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',
|
||||
};
|
86
packages/core/test/data/widgets.mock.ts
Normal file
86
packages/core/test/data/widgets.mock.ts
Normal file
@ -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,
|
||||
};
|
||||
};
|
Reference in New Issue
Block a user