feat: ui overhaul (#676)

This commit is contained in:
Daniel Lautzenheiser
2023-03-30 13:29:09 -04:00
committed by GitHub
parent 5c86462859
commit 66b81e9228
385 changed files with 20607 additions and 16493 deletions

View File

@ -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,
],
};

View 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,
});

View 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,
});

View 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,
});

View 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',
};

View 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,
};
};