tinacms 1.5.17 → 1.5.18

package/dist/toolkit/core/plugins.d.ts

@@ -0,0 +1,249 @@
+/**
+ * This package defines the plugin system of TinaCMS.
+ *
+ * The management of plugins is a core part of a content
+ * management system. The API for managing plugins in TinaCMS is quite
+ * powerful, although the implementation is a bit awkward.
+ *
+ * [[Plugin|Plugins]] are objects used to extend and modify the
+ * behaviour of the CMS. Each plugin has a `__type` field that is used
+ * to group plugins by their purpose.
+ *
+ * The [[PluginType]] class is responsible for managing a collection of
+ * plugins with the same `__type` value. Plugins can be added and removed from
+ * the `PluginType` over the life of the application.
+ *
+ * A new [[CMS]] is not initialized with any `PluginTypes`.
+ * Instead it has a single [[PluginTypeManager]] which is responsible for
+ * creating and managing different `PluginType` instances.
+ *
+ * Although somewhat confusing from the maintainers perspective, this
+ * structure results in a pretty easy to use interface for the clients.
+ * The concept of `PluginType` and `PluginTypeManager` are not really
+ * meant to be exposed to developers using TinaCMS in their projects.
+ *
+ * @packageDocumentation
+ */
+import { EventBus, Callback } from './event';
+/**
+ * An object used to extend or modify the behaviour of the content management system.
+ */
+export interface Plugin {
+    /**
+     * Used to organize plugins with a common purpose.
+     */
+    __type: string;
+    /**
+     * A unique identifier for the plugin.
+     *
+     * @todo Rename to `id`.
+     */
+    name: string;
+    /**
+     * A string referencing an icon.
+     *
+     * ### !DEPRECATED!
+     *
+     * This shouldn't be here. Please assume it isn't.
+     */
+    icon?: string;
+}
+/**
+ * Manages all of the [[PluginType|PluginTypes]] on a [[CMS]].
+ */
+export declare class PluginTypeManager {
+    private events;
+    /**
+     * @ignore
+     */
+    private plugins;
+    constructor(events: EventBus);
+    /**
+     * Gets the [[PluginType|collection of plugins]] for the given type.
+     *
+     * #### Example: Basic Usage
+     *
+     * ```ts
+     * const colorPlugins = cms.plugins.get("color")
+     * ```
+     *
+     * #### Example: Advanced Types
+     *
+     * A type param can be added to specify the kind of Plugin
+     * that is being listed.
+     *
+     * ```ts
+     * const colorPlugins = cms.plugins.get<ColorPlugin>("color")
+     * ```
+     *
+     * @param type The type of plugins to be retrieved
+     * @typeparam P A subclass of Plugin. Optional.
+     */
+    getType<P extends Plugin = Plugin>(type: P['__type']): PluginType<P>;
+    /**
+     * An alias to [[get]]
+     *
+     * ### !DEPRECATED!
+     *
+     * This name is unnecessarily verbose and weird.
+     */
+    findOrCreateMap<P extends Plugin = Plugin>(type: P['__type']): PluginType<P>;
+    /**
+     * Adds a Plugin to the CMS.
+     *
+     * #### Example: Basic Usage
+     *
+     * ```js
+     * cms.plugins.add({ __type: "color", name: "red" })
+     * ```
+     *
+     * #### Example: Advanced Types
+     *
+     * ```ts
+     * interface ColorPlugin extends Plugin {
+     *   __type: "color"
+     *   hex: string
+     *   rgb: string
+     * }
+     *
+     * cms.plugins.add<ColorPlugin>({
+     *   __type: "color",
+     *   name: "red",
+     *   hex: "#FF0000",
+     *   rgb: "RGBA(255, 0, 0, 1)"
+     * })
+     * ```
+     *
+     * @typeparam P A subclass of Plugin. Optional.
+     * @param plugin
+     * @todo Consider returning the plugin which was just added.
+     */
+    add<P extends Plugin = Plugin>(plugin: P): void;
+    /**
+     * Removes the given plugin from the CMS.
+     *
+     * #### Example
+     *
+     * In this example a plugin is added to the CMS and removed
+     * 5 seconds later.
+     *
+     * ```ts
+     * const redPlugin = {
+     *   __type: "color",
+     *   name: "red",
+     *   hex: "#FF0000",
+     *   rgb: "RGBA(255, 0, 0, 1)"
+     * }
+     *
+     * cms.plugins.add(redPlugin)
+     *
+     * setTimeout(() => {
+     *   cms.plugins.remove(redPlugin)
+     * }, 5000)
+     * ```
+     *
+     * @typeparam P A subclass of Plugin. Optional.
+     * @param plugin The plugin to be removed from the CMS.
+     */
+    remove<P extends Plugin = Plugin>(plugin: P): void;
+    /**
+     * Returns a list of all the plugins of the given type.
+     *
+     * #### Example: Basic Usage
+     *
+     * ```ts
+     * cms.plugins.all("color").forEach(color => {
+     *   console.log(color.name)
+     * })
+     * ```
+     *
+     * #### Example: Advanced Types
+     *
+     * A generic can be added to specify the type of plugins
+     * that are being retrieved.
+     *
+     * ```ts
+     * cms.plugins.all<ColorPlugin>("color").forEach(color => {
+     *   console.log(color.name, color.hex)
+     * })
+     * ```
+     *
+     * @typeparam P A subclass of Plugin. Optional.
+     * @param type The name of the plugin
+     * @returns An array of all plugins of the given type.
+     */
+    all<P extends Plugin = Plugin>(type: string): P[];
+}
+/**
+ * @ignore
+ */
+interface Map<T> {
+    [key: string]: T;
+}
+/**
+ * @ignore
+ */
+declare type PluginMap<T extends Plugin = Plugin> = Map<T>;
+/**
+ * A collection of plugins with the same `__type` value.
+ */
+export declare class PluginType<T extends Plugin = Plugin> {
+    private __type;
+    private events;
+    /**
+     * @ignore
+     */
+    __plugins: PluginMap<T>;
+    /**
+     *
+     * @param __type The `__type` of plugin being managed.
+     */
+    constructor(__type: string, events: EventBus);
+    /**
+     * Adds a new plugin to the collection.
+     *
+     * ### Example
+     *
+     * ```ts
+     * interface ColorPlugin extends Plugin {
+     *   hex: string
+     * }
+     *
+     * const colorPlugins = new PluginType<ColorPlugin>("color")
+     *
+     * colorPlugins.add({ name: "red", hex: "#f00" })
+     * ```
+     *
+     * @param plugin A new plugin. The `__type` is optional and will be added if it's missing.
+     */
+    add(plugin: T | Omit<T, '__type'>): void;
+    all(): T[];
+    /**
+     *
+     * Looks up a plugin by it's `name`.
+     *
+     * ### Example
+     *
+     * ```ts
+     * const colorPlugins = new PluginType<ColorPlugin>("color")
+     *
+     * colorPlugins.add({ name: "red", hex: "#f00" })
+     *
+     * colorPlugins.find("red")  // { __type: "color", name: "red", hex: "#f00" }
+     * colorPlugin.find("large") // undefined
+     * ```
+     *
+     * @param name The `name` of the plugin to be retrieved.
+     */
+    find(name: string): T | undefined;
+    /**
+     * Pass this function a plugin or the `name` of a plugin to have
+     * it be removed from the CMS.
+     *
+     * @param pluginOrName The `name` of a plugin, or the plugin itself.
+     * @returns The plugin that was removed, or `undefined` if it was not found.
+     */
+    remove(pluginOrName: string | T): T | undefined;
+    subscribe(cb: Callback): () => void;
+}
+export {};

package/dist/toolkit/core/subscribable.d.ts

@@ -0,0 +1,72 @@
+/**
+ * This package provides an abstract class for making objects Subscribable.
+ *
+ * @packageDocumentation
+ */
+/**
+ * @ignore
+ */
+export declare type Unsubscribe = () => void;
+/**
+ * A basic class that can be subscribed to.
+ */
+export declare class Subscribable {
+    /**
+     * @ignore
+     */
+    protected __subscribers: Function[];
+    /**
+     * Adds a listener to the Subscribable object.
+     *
+     * ### Example
+     *
+     * ```ts
+     * const unsubscribe = someSubscribable.add(() => {
+     *   console.log("Update Received")
+     * })
+     *
+     * setTimeout(unsubscribe, 5000)
+     * ```
+     *
+     *
+     * @param listener A function to be called when the `Subscribable` is updated.
+     * @returns A function that will unsubscribe the listener.
+     */
+    subscribe(listener: Function): Unsubscribe;
+    /**
+     * Removes the given listener from the `Subscribable` object.
+     *
+     * @param listener The functioni to be removed.
+     */
+    unsubscribe(listener: Function): void;
+    /**
+     * Notifies subscribers that the `Subscribable` has changed.
+     *
+     * ### Example
+     *
+     * ```ts
+     * class Cup extends Subscribable {
+     *   isFull: boolean = false
+     *
+     *   fill() {
+     *     this.isFull = true
+     *     this.notifySubscribers()
+     *   }
+     *
+     *   empty() {
+     *     this.isFull = false
+     *     this.notifySubscribers()
+     *   }
+     *
+     * }
+     *
+     * const cup = new Cup()
+     *
+     * cup.subscribe(() => console.log(cup.isFull))
+     *
+     * cup.fill() // Logs: true
+     * cup.empty() // Logs: false
+     * ```
+     */
+    protected notifiySubscribers(): void;
+}

package/dist/toolkit/fields/components/button-toggle.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+declare type Option = {
+    value: string;
+    label?: string;
+    icon?: React.ComponentType<any>;
+};
+interface ButtonToggleFieldProps {
+    label?: string;
+    name: string;
+    component: string;
+    options: (Option | string)[];
+    direction?: 'horizontal' | 'vertical';
+}
+export interface ButtonToggleProps {
+    name: string;
+    input: any;
+    field: ButtonToggleFieldProps;
+    disabled?: boolean;
+    options?: (Option | string)[];
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const ButtonToggle: React.FC<ButtonToggleProps>;
+export {};

package/dist/toolkit/fields/components/checkbox-group.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+declare type Option = {
+    value: string;
+    label: string;
+};
+export interface CheckboxGroupFieldProps {
+    name: string;
+    label?: string;
+    component: string;
+    options: (Option | string)[];
+    direction?: 'horizontal' | 'vertical';
+}
+export interface CheckboxGroupProps {
+    name: string;
+    input: any;
+    field: CheckboxGroupFieldProps;
+    disabled?: boolean;
+    options?: (Option | string)[];
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export {};

package/dist/toolkit/fields/components/color-picker/color-formatter.d.ts

@@ -0,0 +1,20 @@
+export interface ColorRGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export declare enum ColorFormat {
+    Hex = "hex",
+    RGB = "rgb"
+}
+interface ColorFormatHandler {
+    getLabel(color: ColorRGBA): string;
+    getValue(color: ColorRGBA): string;
+    parse(color?: string): ColorRGBA | null;
+}
+interface ColorFormatHandlers {
+    [key: string]: ColorFormatHandler;
+}
+export declare const ColorFormatter: ColorFormatHandlers;
+export {};

package/dist/toolkit/fields/components/color-picker/color-picker.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ColorFormat } from './color-formatter';
+declare type WrappedFieldProps = any;
+interface Props {
+    colorFormat: ColorFormat;
+    userColors: string[];
+    widget?: 'sketch' | 'block';
+    input: WrappedFieldProps['input'];
+}
+export declare const ColorPicker: React.FC<Props>;
+export {};

package/dist/toolkit/fields/components/color-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './color-picker';

package/dist/toolkit/fields/components/image-upload/image-upload.d.ts

@@ -0,0 +1,23 @@
+/**
+
+*/
+import * as React from 'react';
+interface ImageUploadProps {
+    onDrop: (files: any, fileRejections: any) => Promise<void>;
+    onClear?: () => void;
+    onClick?: () => void;
+    value?: string;
+    src?: string;
+    loading?: boolean;
+}
+export declare const StyledImage: ({ src }: {
+    src: any;
+}) => JSX.Element;
+export declare const StyledFile: ({ src }: {
+    src: any;
+}) => JSX.Element;
+export declare const ImageUpload: React.ForwardRefExoticComponent<ImageUploadProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DeleteImageButton: ({ onClick, }: {
+    onClick: (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}) => JSX.Element;
+export {};

package/dist/toolkit/fields/components/image-upload/index.d.ts

@@ -0,0 +1 @@
+export * from './image-upload';

package/dist/toolkit/fields/components/index.d.ts

@@ -0,0 +1,12 @@
+export * from './text-field';
+export * from './textarea';
+export * from './color-picker';
+export * from './toggle';
+export * from './select';
+export * from './radio-group';
+export * from './checkbox-group';
+export * from './number-input';
+export * from './image-upload';
+export * from './input';
+export * from './reference';
+export * from './button-toggle';

package/dist/toolkit/fields/components/input.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface InputProps {
+    error?: boolean;
+    small?: boolean;
+    placeholder?: string;
+    step?: string | number;
+}
+export declare const Input: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;

package/dist/toolkit/fields/components/number-input.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type a = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export interface NumberProps extends a {
+    step?: string | number;
+}
+export declare const NumberInput: React.FC<NumberProps>;
+export {};

package/dist/toolkit/fields/components/radio-group.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare type Option = {
+    value: string;
+    label: string;
+};
+interface RadioGroupFieldProps {
+    label?: string;
+    name: string;
+    component: string;
+    options: (Option | string)[];
+    direction?: 'horizontal' | 'vertical';
+}
+export interface RadioGroupProps {
+    name: string;
+    input: any;
+    field: RadioGroupFieldProps;
+    disabled?: boolean;
+    options?: (Option | string)[];
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

package/dist/toolkit/fields/components/reference/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare type Option = {
+    value: string;
+    label: string;
+};
+export interface ReferenceFieldProps {
+    label?: string;
+    name: string;
+    component: string;
+    collections: string[];
+    options: (Option | string)[];
+}
+export interface ReferenceProps {
+    name: string;
+    input: any;
+    field: ReferenceFieldProps;
+    disabled?: boolean;
+    options?: (Option | string)[];
+}
+export declare const Reference: React.FC<ReferenceProps>;
+export {};

package/dist/toolkit/fields/components/reference/reference-link.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TinaCMS } from '../../../tina-cms';
+interface ReferenceLinkProps {
+    cms: TinaCMS;
+    input: any;
+}
+declare const ReferenceLink: React.FC<ReferenceLinkProps>;
+export default ReferenceLink;

package/dist/toolkit/fields/components/reference/reference-select.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { TinaCMS } from '../../../tina-cms';
+import type { ReferenceFieldProps } from './index';
+import { Field } from '../../../forms';
+interface ReferenceSelectProps {
+    cms: TinaCMS;
+    input: any;
+    field: ReferenceFieldProps & Field;
+}
+declare const ReferenceSelect: React.FC<ReferenceSelectProps>;
+export default ReferenceSelect;

package/dist/toolkit/fields/components/select.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { Field } from '../../forms';
+declare type Option = {
+    value: string;
+    label: string;
+};
+interface SelectFieldProps {
+    label?: string;
+    name: string;
+    component: string;
+    options: (Option | string)[];
+}
+export interface SelectProps {
+    name: string;
+    input: React.SelectHTMLAttributes<HTMLSelectElement>;
+    field?: SelectFieldProps & Field;
+    disabled?: boolean;
+    options?: (Option | string)[];
+    className?: string;
+}
+export declare const selectFieldClasses = "shadow appearance-none bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md";
+export declare const Select: React.FC<SelectProps>;
+export {};

package/dist/toolkit/fields/components/text-field.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare type a = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export interface TextFieldProps extends a {
+    error?: boolean;
+    ref?: any;
+}
+export declare const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
+export declare const BaseTextField: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/toolkit/fields/components/textarea.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare type a = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export interface TextAreaProps extends a {
+    error?: boolean;
+    ref?: any;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "key" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/toolkit/fields/components/toggle.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import * as React from 'react';
+import { Field } from '../../forms';
+export interface ToggleProps {
+    name: string;
+    input: any;
+    field: ToggleFieldDefinition;
+    disabled?: boolean;
+    onBlur: <T>(_event?: React.FocusEvent<T>) => void;
+    onChange: <T>(_event: React.ChangeEvent<T> | any) => void;
+    onFocus: <T>(_event?: React.FocusEvent<T>) => void;
+}
+interface ToggleFieldDefinition extends Field {
+    component: 'toggle';
+    toggleLabels?: boolean | FieldLabels;
+}
+declare type FieldLabels = {
+    true: string;
+    false: string;
+};
+export declare const Toggle: FC<ToggleProps>;
+export {};

package/dist/toolkit/fields/field-events.d.ts

@@ -0,0 +1,11 @@
+import { CMSEvent } from '../core/event';
+export interface FieldHoverEvent extends CMSEvent {
+    type: 'field:hover';
+    fieldName: string | null;
+    id: string;
+}
+export interface FieldFocusEvent extends CMSEvent {
+    type: 'field:focus';
+    fieldName: string;
+    id: string;
+}

package/dist/toolkit/fields/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './plugins';
+export * from './plugins/wrap-field-with-meta';

package/dist/toolkit/fields/plugins/blocks-field-plugin/block-selector-big.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BlockTemplate } from '.';
+export declare const BlockSelectorBig: ({ templates, addItem, label, }: {
+    templates: {
+        [key: string]: BlockTemplate;
+    };
+    addItem: any;
+    label: string | boolean;
+}) => JSX.Element;

package/dist/toolkit/fields/plugins/blocks-field-plugin/block-selector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BlockTemplate } from '.';
+export declare const BlockSelector: ({ templates, addItem, }: {
+    templates: {
+        [key: string]: BlockTemplate;
+    };
+    addItem: any;
+}) => JSX.Element;