tinacms 0.66.8 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # tinacms
 
+## 0.67.0
+
+### Minor Changes
+
+- 86651039b: Updates to the way forms are generated in contextual editing. This lays the groundwork for
+  future updates but doesn't offer new behavior yet. It does come with a small breaking change:
+
+  [BREAKING]: The `id` of forms is now the actual document `path`. Previously this was the name of the GraphQL query node (eg. `getPostDocument`).
+  If you're using the [`formifyCallback`](https://tina.io/docs/advanced/customizing-forms/#customizing-a-form) prop to create global forms, you'll probably need to update the callback to check for the appropriate id.
+
+  Eg. `formConfig.id === 'getSiteNavsDocument'` should be something like `formConfig.id === 'content/navs/mynav.md'`
+
+  If you're experiencing any issues with contextual editing, you can disable this flag for now by specifying `cms.flags.set('use-unstable-formify', false)`.
+
+## 0.66.10
+
+### Patch Changes
+
+- 39a8c4f7d: Fix issue with unstableFormify where `Document` interface fields were not being formified properly
+- ec28a129b: Update to tina admin to use the frontend schema
+- a28b787c5: With the rich-text editor, inserting a soft-break (`shift+enter`), this will now result in a `<br>` tag being inserted. Note that this will save the markdown with a backslash to indicate line break (instead of multiple empty spaces):
+
+  ```markdown
+  123 Abc St\
+  Charlottetown, PEI
+  ```
+
+- 93363dfc2: Prevent error on reset when nested blocks have changed in unstable formify hook
+- abf25c673: The schema can now to used on the frontend (optional for now but will be the main path moving forward).
+
+  ### How to migrate.
+
+  If you gone though the `tinacms init` process there should be a file called `.tina/components/TinaProvider`. In that file you can import the schema from `schema.ts` and add it to the TinaCMS wrapper component.
+
+  ```tsx
+  import TinaCMS from 'tinacms'
+  import schema, { tinaConfig } from '../schema.ts'
+
+  // Importing the TinaProvider directly into your page will cause Tina to be added to the production bundle.
+  // Instead, import the tina/provider/index default export to have it dynamially imported in edit-moode
+  /**
+   *
+   * @private Do not import this directly, please import the dynamic provider instead
+   */
+  const TinaProvider = ({ children }) => {
+    return (
+      <TinaCMS {...tinaConfig} schema={schema}>
+        {children}
+      </TinaCMS>
+    )
+  }
+
+  export default TinaProvider
+  ```
+
+- 591640db0: Fixes a bug with `breadcrumbs` to account for subfolders (instead of just the `filename`) and allows Documents to be created and updated within subfolders.
+
+  Before this fix, `breadcrumbs` was only the `basename` of the file minus the `extension`. So `my-folder-a/my-folder-b/my-file.md` would have `breadcrumbs` of `['my-file']`. With this change, `breadcrumbs` will be `['my-folder-a','my-folder-b','my-file']` (leaving out the `content/<collection>`).
+
+- 875779ac6: Don't attempt to formify nodes which don't have data fields (ie. ...on Node)
+- e8b0de1f7: Add `parentTypename` to fields to allow us to disambiguate between fields which have the same field names but different types. Example, an event from field name of `blocks.0.title` could belong to a `Cta` block or a `Hero` block, both of which have a `title` field.
+- Updated dependencies [429d8e93e]
+- Updated dependencies [6c517b5da]
+- Updated dependencies [e81cf8867]
+- Updated dependencies [abf25c673]
+- Updated dependencies [801f39f62]
+- Updated dependencies [0e270d878]
+- Updated dependencies [e8b0de1f7]
+  - @tinacms/sharedctx@0.1.1
+  - @tinacms/toolkit@0.56.19
+  - @tinacms/schema-tools@0.0.2
+
+## 0.66.9
+
+### Patch Changes
+
+- 91d5a6073: Allow "." in file names
+- 11d55f441: Add experimental useGraphQLForms hook
+- f41bd62ea: Ensure client-side Tina code only runs on the browser. Without this check, we'd see a server/client mismatch like:
+
+  ```
+  warning.js:33 Warning: Expected server HTML to contain a matching <div> in <body>.
+  ```
+
+- Updated dependencies [e9a0c82cf]
+- Updated dependencies [d4fdeaa9f]
+- Updated dependencies [ed85f2594]
+- Updated dependencies [d86e515ba]
+- Updated dependencies [db0dab1d4]
+  - @tinacms/toolkit@0.56.18
+
 ## 0.66.8
 
 ### Patch Changes

package/dist/client/index.d.ts

@@ -14,12 +14,14 @@ import { TokenObject } from '../auth/authenticate';
 import { BranchData, EventBus } from '@tinacms/toolkit';
 import { DocumentNode, GraphQLSchema } from 'graphql';
 import gql from 'graphql-tag';
+import { TinaSchema, TinaCloudSchema } from '@tinacms/schema-tools';
 export declare type TinaIOConfig = {
     frontendUrlOverride?: string;
     identityApiUrlOverride?: string;
     contentApiUrlOverride?: string;
 };
 interface ServerOptions {
+    schema?: TinaCloudSchema<false>;
     clientId: string;
     branch: string;
     customContentApiUrl?: string;
@@ -31,7 +33,8 @@ export declare class Client {
     frontendUrl: string;
     contentApiUrl: string;
     identityApiUrl: string;
-    schema: GraphQLSchema;
+    gqlSchema: GraphQLSchema;
+    schema?: TinaSchema;
     clientId: string;
     contentApiBase: string;
     query: string;
@@ -103,6 +106,7 @@ export declare const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/
 export declare class LocalClient extends Client {
     constructor(props?: {
         customContentApiUrl?: string;
+        schema?: TinaCloudSchema<false>;
     });
     isAuthorized(): Promise<boolean>;
     isAuthenticated(): Promise<boolean>;

package/dist/edit-state.es.js

@@ -97,7 +97,11 @@ const ToggleButton = () => {
 };
 const TinaEditProviderInner = ({ children, editMode }) => {
   const { edit } = useEditState();
-  if (edit) {
+  const [isBrowser, setIsBrowser] = React.useState(false);
+  React.useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+  if (edit && isBrowser) {
     return editMode;
   }
   return children;

package/dist/edit-state.js

@@ -102,7 +102,11 @@ var __objRest = (source, exclude) => {
   };
   const TinaEditProviderInner = ({ children, editMode }) => {
     const { edit } = sharedctx.useEditState();
-    if (edit) {
+    const [isBrowser, setIsBrowser] = React__default["default"].useState(false);
+    React__default["default"].useEffect(() => {
+      setIsBrowser(true);
+    }, []);
+    if (edit && isBrowser) {
       return editMode;
     }
     return children;

package/dist/hooks/formify/formify-utils.d.ts

@@ -0,0 +1,89 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import * as G from 'graphql';
+import type { BlueprintPath } from './types';
+/**
+ *
+ * This check ensures that at type is a Document, but only one
+ * that can be "formified". When using `Node` or `Document`, those
+ * query fields should not have forms generated since they can't contain
+ * fields.
+ *
+ * ```graphql
+ * # Can be formified
+ * {
+ *   getPostDocument(relativePath: "") {
+ *     data {
+ *       title
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * ```graphql
+ * # cannot be formified, even though it is a document field
+ * {
+ *   getPostDocument(relativePath: "") {
+ *     ...on Document {
+ *       id
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare const isFormifiableDocument: (t: G.GraphQLOutputType) => boolean;
+export declare const isScalarType: (t: G.GraphQLOutputType) => boolean;
+export declare const isConnectionField: (t: G.GraphQLOutputType) => boolean;
+/**
+ * Selects the appropriate field from a GraphQLObject based on the selection's name
+ */
+export declare const getObjectField: (object: G.GraphQLOutputType, selectionNode: G.FieldNode) => G.GraphQLField<any, any, {
+    [key: string]: any;
+}>;
+/**
+ * Selects the appropriate type from a union based on the selection's typeCondition
+ *
+ * ```graphql
+ * post {
+ *    # would return PostDocument
+ *   ...on PostDocument { ... }
+ * }
+ * ```
+ */
+export declare const getSelectedUnionType: (unionType: G.GraphQLOutputType, selectionNode: G.InlineFragmentNode) => any;
+/**
+ * Checks if the given type is a list type. Even though
+ * this function is built-in to GraphQL it doesn't handle
+ * the scenario where the list type is wrapped in a non-null
+ * type, so the extra check here is needed.
+ */
+export declare function isListType(type: unknown): boolean;
+/**
+ *
+ * Throws an error if the provided type is not a GraphQLUnionType
+ */
+export declare function ensureOperationDefinition(type: G.DefinitionNode): asserts type is G.OperationDefinitionNode;
+/**
+ * Generates the name and alias information for a given field node
+ * and appends it to a shallow copy of the path provided
+ */
+export declare function buildPath({ fieldNode, type, parentTypename, path, }: {
+    fieldNode: G.FieldNode;
+    type: G.GraphQLOutputType;
+    parentTypename?: string;
+    path?: BlueprintPath[];
+}): BlueprintPath[];
+export declare const metaFields: G.SelectionNode[];
+export declare const getRelativeBlueprint: (path: BlueprintPath[]) => string;
+export declare const getBlueprintId: (path: BlueprintPath[]) => string;
+export declare const getFieldAliasForBlueprint: (path: BlueprintPath[]) => string;

package/dist/{types/index.d.ts → hooks/formify/formify.d.ts}

@@ -1,18 +1,23 @@
 /**
-
 Copyright 2021 Forestry.io Holdings, Inc.
-
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
-
     http://www.apache.org/licenses/LICENSE-2.0
-
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-
 */
-export * from './SchemaTypes';
+import * as G from 'graphql';
+import type { DocumentBlueprint } from './types';
+export declare const DATA_NODE_NAME = "data";
+export declare const formify: ({ schema, query, getOptimizedQuery, }: {
+    schema: G.GraphQLSchema;
+    query: string;
+    getOptimizedQuery: (query: G.DocumentNode) => Promise<G.DocumentNode>;
+}) => Promise<{
+    formifiedQuery: G.DocumentNode;
+    blueprints: DocumentBlueprint[];
+}>;

package/dist/hooks/formify/index.d.ts

@@ -10,48 +10,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { GraphQLSchema, DocumentNode } from 'graphql';
-import React from 'react';
-import * as G from 'graphql';
 import type { TinaCMS } from '@tinacms/toolkit';
-declare type Action = {
-    type: 'setSchema';
-    value: G.GraphQLSchema;
-} | {
-    type: 'setQuery';
-    value: G.DocumentNode;
-} | {
-    type: 'addNode';
-    value: DocNode;
-};
-export declare type DocNode = {
-    path: readonly (string | number)[];
-};
-export declare type Dispatch = React.Dispatch<Action>;
-/**
- * TODO: this is currently only used for testing, `formify` is where the primary logic is housed
- */
-export declare const useFormify: ({ query, cms }: {
-    query: string;
+import { formify } from './formify';
+import { onSubmitArgs } from '../use-graphql-forms';
+import type { OnChangeEvent, State } from './types';
+export { formify };
+export declare const useFormify: ({ query, cms, variables, onSubmit, formify: formifyFunc, eventList, }: {
+    query?: string;
     cms: TinaCMS;
-}) => {
-    query: string;
-    status: "pending" | "ready" | "done";
-    nodes: DocNode[];
-};
-declare type TinaDocumentNode = {
-    path: {
-        name: string;
-        alias: string;
-        list?: boolean;
-    }[];
-};
-export declare const formify: ({ schema, query, getOptimizedQuery, }: {
-    schema: GraphQLSchema;
-    query: string;
-    getOptimizedQuery: (query: DocumentNode) => Promise<DocumentNode>;
-}) => Promise<{
-    formifiedQuery: DocumentNode;
-    nodes: TinaDocumentNode[];
-}>;
-export {};
+    variables: object;
+    onSubmit?: (args: onSubmitArgs) => void;
+    formify: any;
+    eventList?: OnChangeEvent[];
+}) => State;

package/dist/hooks/formify/reducer.d.ts

@@ -0,0 +1,27 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { FormNode, State, Action, OnChangeEvent } from './types';
+export declare function reducer(state: State, action: Action): State;
+export declare const buildChangeSet: (event: OnChangeEvent, formNode: FormNode) => {
+    fieldDefinition: {
+        name: string;
+        type: "string" | "object" | "reference";
+        list?: boolean;
+        parentTypename: string;
+    };
+    name: string;
+    formId: string;
+    mutationType: import("./types").ChangeMutation | import("./types").ReferenceChangeMutation | import("./types").InsertMutation | import("./types").MoveMutation | import("./types").RemoveMutation | import("./types").ResetMutation | import("./types").GlobalMutation;
+    value: unknown;
+    formNode: FormNode;
+};

package/dist/hooks/formify/{test/to-be-similar-to.d.ts → spec/runner.d.ts}

@@ -10,4 +10,4 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-export {};
+export declare const testRunner: (query: any, events: any, dirname: any, expectNoChange?: boolean) => Promise<void>;

package/dist/hooks/formify/spec/util.d.ts

@@ -0,0 +1,25 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { TinaCMS } from '@tinacms/toolkit';
+import 'isomorphic-fetch';
+/**
+ * We're just mocking the tina api so we can mimic the real-world getSchema
+ */
+declare const cms: TinaCMS;
+export declare const printOutput: (event: any, previous: any, after: any) => string;
+export { printState } from '../util';
+export declare function sleep(ms: any): Promise<unknown>;
+export { cms };
+export declare const sequential: <A, B>(items: A[], callback: (args: A, idx: number) => Promise<B>) => Promise<B[]>;
+export declare const buildFileOutput: (dirname: any) => string;
+export declare const buildMarkdownOutput: (dirname: any, counter: any) => string;

package/dist/hooks/formify/types.d.ts

@@ -0,0 +1,183 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/// <reference types="react" />
+import type * as G from 'graphql';
+import type { Form, Field } from '@tinacms/toolkit';
+export declare type Action = {
+    type: 'start';
+    value: {
+        query: string;
+    };
+} | {
+    type: 'setData';
+    value: object;
+} | {
+    type: 'addDocumentBlueprints';
+    value: {
+        blueprints: DocumentBlueprint[];
+        formifiedQuery: G.DocumentNode;
+    };
+} | {
+    type: 'addOrReplaceDocumentFormNode';
+    value: {
+        formNode: FormNode;
+        documentForm?: DocumentForm;
+    };
+} | {
+    type: 'onFieldChange';
+    value: {
+        event: OnChangeEvent;
+        form?: Form;
+    };
+} | {
+    type: 'formOnReset';
+    value: {
+        event: OnChangeEvent;
+        form?: Form;
+    };
+} | {
+    type: 'ready';
+} | {
+    type: 'done';
+} | {
+    type: 'setIn';
+    value: Pick<ChangeSet, 'path' | 'value' | 'displaceIndex'>;
+};
+export declare type Dispatch = React.Dispatch<Action>;
+export declare type FormifiedDocumentNode = {
+    id: string;
+    _internalSys: {
+        path: string;
+        collection: {
+            name: any;
+        };
+    };
+    form: {
+        mutationInfo: {
+            string: string;
+            includeCollection?: boolean;
+            includeTemplate?: boolean;
+        };
+        label: string;
+        fields: Field[];
+    };
+    values: object;
+};
+export declare type ChangeMutation = {
+    type: 'change';
+};
+export declare type ReferenceChangeMutation = {
+    type: 'referenceChange';
+};
+export declare type InsertMutation = {
+    type: 'insert';
+    at: number;
+};
+export declare type MoveMutation = {
+    type: 'move';
+    from: number;
+    to: number;
+};
+export declare type RemoveMutation = {
+    type: 'remove';
+    at: number;
+};
+export declare type ResetMutation = {
+    type: 'reset';
+};
+export declare type GlobalMutation = {
+    type: 'global';
+};
+declare type MutationType = ChangeMutation | ReferenceChangeMutation | InsertMutation | MoveMutation | RemoveMutation | ResetMutation | GlobalMutation;
+export declare type OnChangeEvent = {
+    type: 'forms:fields:onChange' | 'forms:reset';
+    value: unknown;
+    previousValue: unknown;
+    mutationType: MutationType;
+    formId: string;
+    field: {
+        data: {
+            tinaField: {
+                name: string;
+                type: 'string' | 'reference' | 'object';
+                list?: boolean;
+                parentTypename: string;
+            };
+        };
+        name: string;
+    };
+};
+export declare type ChangeSet = {
+    path: string;
+    value: unknown;
+    formId: string;
+    fieldDefinition: {
+        name: string;
+        type: 'string' | 'reference' | 'object';
+        list?: boolean;
+    };
+    mutationType: MutationType;
+    name: string;
+    displaceIndex?: boolean;
+    formNode: FormNode;
+};
+export declare type BlueprintPath = {
+    name: string;
+    alias: string;
+    parentTypename?: string;
+    list?: boolean;
+    isNode?: boolean;
+};
+export declare type DocumentBlueprint = {
+    /** The stringified representation of a path relative to root or it's parent document */
+    id: string;
+    /** The path to a field node */
+    path: BlueprintPath[];
+    /** The GraphQL SelectionNode, useful for re-fetching the given node */
+    selection: G.SelectionNode;
+    fields: FieldBlueprint[];
+    /** For now, only top-level, non-list nodes will be shown in the sidebar */
+    showInSidebar: boolean;
+    /** these 2 are not traditional GraphQL fields but need be kept in-sync regardless */
+    hasDataJSONField: boolean;
+    hasValuesField: boolean;
+};
+export declare type FieldBlueprint = {
+    /** The stringified representation of a path relative to root or it's parent document */
+    id: string;
+    documentBlueprintId: string;
+    /** The path to a field node */
+    path: BlueprintPath[];
+};
+export declare type FormNode = {
+    /** The stringified path with location values injected (eg. 'getBlockPageList.edges.0.node.data.social.1.relatedPage') */
+    documentFormId: string;
+    documentBlueprintId: string;
+    /** Coordinates for the DocumentBlueprint's '[]' values */
+    location: number[];
+};
+/** The document ID is the true ID 'content/pages/hello-world.md') */
+declare type DocumentForm = Form;
+export declare type State = {
+    schema: G.GraphQLSchema;
+    query: G.DocumentNode;
+    queryString: string;
+    status: 'idle' | 'initialized' | 'formified' | 'ready' | 'done';
+    count: number;
+    data: object;
+    changeSets: ChangeSet[];
+    blueprints: DocumentBlueprint[];
+    formNodes: FormNode[];
+    documentForms: DocumentForm[];
+};
+export {};