@tinacms/app 0.0.0-00f6525-20241015065741

package/src/index.css

@@ -0,0 +1,384 @@
+@import 'global.css';
+@import 'preflight.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Tailwind reset clobbers some playground styles */
+.graphiql-execute-button {
+  @apply bg-blue-600 !important;
+}
+
+.icon-parent svg {
+  fill: currentColor;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+div.graphiql-explorer-root > div:last-child {
+  display: none;
+}
+
+.graphiql-container {
+  height: 100vh !important;
+  width: 100vw !important;
+}
+
+/* if the last block has margin-bottom it makes the text box larger but some of it isn't clickable */
+.tina-prose [data-slate-editor='true'] {
+  padding-bottom: 0.5em;
+  /* Outline is placed on the parent element for styling consistency with other elements */
+  outline: none;
+}
+/* prose adds backticks, which look like they should be editable */
+.tina-prose [data-slate-editor='true'] .slate-code::before {
+  content: '';
+}
+.tina-prose [data-slate-editor='true'] .slate-code::after {
+  content: '';
+}
+.tina-prose [data-slate-editor='true'] .slate-code_block {
+  margin: 0;
+}
+/* code lines as part of a block don't need the same background formatting */
+.tina-prose [data-slate-editor='true'] .slate-code_block .slate-code {
+  background: none;
+}
+/* prose makes the first p in a block slightly larger */
+.tina-prose [data-slate-editor='true'] p:first-of-type {
+  font-size: 1em;
+}
+
+/* experimental floating toolbar doesn't need a large text area */
+.with-toolbar [data-slate-editor='true'] {
+  min-height: 72px;
+}
+
+@keyframes color-popup-keyframes {
+  0% {
+    transform: translate3d(-50%, 0, 0) scale3d(0.5, 0.5, 1);
+  }
+  100% {
+    transform: translate3d(-50%, 8px, 0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes color-popup-open-top-keyframes {
+  0% {
+    transform: translate3d(-50%, -100%, 0) scale3d(0.5, 0.5, 1);
+  }
+  100% {
+    transform: translate3d(-50%, calc(-100% - 8px), 0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes loading-dots-scale-up-and-down {
+  0% {
+    transform: scale(0.1);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  90% {
+    transform: scale(0.1);
+  }
+
+  100% {
+    transform: scale(0.1);
+  }
+}
+
+.color-picker-clip-path::before,
+.color-picker-clip-path::after {
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+
+.color-picker-on-top-clip-path::before,
+.color-picker-on-top-clip-path::after {
+  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
+}
+
+.tina-date-field .rdt {
+  position: relative;
+}
+
+.tina-date-field .rdtPicker {
+  display: none;
+  position: absolute;
+  width: 100%;
+  max-width: 350px;
+  padding: 4px;
+  margin-top: 4px;
+  z-index: 99999 !important;
+  background: var(--tina-color-grey-0);
+  border-radius: var(--tina-radius-small);
+  box-shadow: var(--tina-shadow-big);
+  border: 1px solid var(--tina-color-grey-2);
+}
+
+.tina-date-field .rdtOpen .rdtPicker {
+  display: block;
+}
+
+.tina-date-field .rdtStatic .rdtPicker {
+  box-shadow: none;
+  position: static;
+}
+
+.tina-date-field .rdtPicker .rdtTimeToggle {
+  text-align: center;
+}
+
+.tina-date-field .rdtPicker table {
+  width: 100%;
+  margin: 0;
+}
+
+.tina-date-field .rdtPicker td,
+.rdtPicker th {
+  text-align: center;
+  height: 28px;
+}
+
+.tina-date-field .rdtPicker td {
+  cursor: pointer;
+}
+
+.tina-date-field .rdtPicker td.rdtDay:hover,
+.tina-date-field .rdtPicker td.rdtHour:hover,
+.tina-date-field .rdtPicker td.rdtMinute:hover,
+.tina-date-field .rdtPicker td.rdtSecond:hover,
+.tina-date-field .rdtPicker .rdtTimeToggle:hover {
+  background: var(--tina-color-grey-2);
+  color: var(--tina-color-primary);
+  border-radius: var(--tina-radius-small);
+  cursor: pointer;
+}
+
+.tina-date-field .rdtPicker td.rdtDay:hover:active,
+.tina-date-field .rdtPicker td.rdtHour:hover:active,
+.tina-date-field .rdtPicker td.rdtMinute:hover:active,
+.tina-date-field .rdtPicker td.rdtSecond:hover:active,
+.tina-date-field .rdtPicker .rdtTimeToggle:hover:active {
+  background: var(--tina-color-primary);
+  color: var(--tina-color-grey-0);
+  border-radius: var(--tina-radius-small);
+}
+
+.tina-date-field .rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
+  color: var(--tina-color-grey-6);
+}
+
+.tina-date-field .rdtPicker td.rdtToday {
+  position: relative;
+}
+
+.tina-date-field .rdtPicker td.rdtToday:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid var(--tina-color-primary);
+  border-radius: 20px;
+  border-top-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+
+.tina-date-field .rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: var(--tina-color-primary);
+  color: var(--tina-color-grey-0);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.tina-date-field .rdtPicker td.rdtActive.rdtToday:before {
+  border-bottom-color: var(--tina-color-grey-0);
+}
+
+.tina-date-field .rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+  background: none;
+  color: var(--tina-color-grey-6);
+  cursor: not-allowed;
+}
+
+.tina-date-field .rdtPicker td span.rdtOld {
+  color: var(--tina-color-grey-6);
+}
+
+.tina-date-field .rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+  background: none;
+  color: var(--tina-color-grey-6);
+  cursor: not-allowed;
+}
+
+.tina-date-field .rdtPicker th {
+  border-bottom: 1px solid var(--tina-color-grey-1);
+}
+
+.tina-date-field .rdtPicker .dow {
+  width: 14.2857%;
+  border-bottom: none;
+  cursor: default;
+}
+
+.tina-date-field .rdtPicker th.rdtSwitch {
+  width: 100px;
+}
+
+.tina-date-field .rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+  font-size: 21px;
+  vertical-align: top;
+}
+
+.tina-date-field .rdtPrev span,
+.rdtNext span {
+  display: block;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  -khtml-user-select: none;
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.tina-date-field .rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+  background: none;
+  color: var(--tina-color-grey-6);
+  cursor: not-allowed;
+}
+
+.tina-date-field .rdtPicker thead tr:first-child th {
+  cursor: pointer;
+}
+
+.tina-date-field .rdtPicker thead tr:first-child th:hover {
+  background: var(--tina-color-grey-2);
+  color: var(--tina-color-primary);
+  border-radius: var(--tina-radius-small);
+}
+
+.tina-date-field .rdtPicker tfoot {
+  border-top: 1px solid var(--tina-color-grey-1);
+}
+
+.tina-date-field .rdtPicker button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.tina-date-field .rdtPicker button:hover {
+  background: var(--tina-color-grey-2);
+  color: var(--tina-color-primary);
+  border-radius: var(--tina-radius-small);
+}
+
+.tina-date-field .rdtPicker thead button {
+  width: 100%;
+  height: 100%;
+}
+
+.tina-date-field td.rdtMonth,
+td.rdtYear {
+  height: 50px;
+  width: 25%;
+  cursor: pointer;
+}
+
+.tina-date-field td.rdtMonth:hover,
+td.rdtYear:hover {
+  background: var(--tina-color-grey-2);
+  color: var(--tina-color-primary);
+  border-radius: var(--tina-radius-small);
+}
+
+.tina-date-field .rdtCounters {
+  display: inline-block;
+}
+
+.tina-date-field .rdtCounters > div {
+  float: left;
+}
+
+.tina-date-field .rdtCounter {
+  height: 100px;
+}
+
+.tina-date-field .rdtCounter {
+  width: 40px;
+}
+
+.tina-date-field .rdtCounterSeparator {
+  line-height: 100px;
+}
+
+.tina-date-field .rdtCounter .rdtBtn {
+  height: 40%;
+  line-height: 40px;
+  cursor: pointer;
+  display: block;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  -khtml-user-select: none;
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.tina-date-field .rdtCounter .rdtBtn:hover {
+  background: var(--tina-color-grey-2);
+  color: var(--tina-color-primary);
+  border-radius: var(--tina-radius-small);
+}
+
+.tina-date-field .rdtCounter .rdtCount {
+  height: 20%;
+  font-size: 1.2em;
+}
+
+.tina-date-field .rdtMilli {
+  vertical-align: middle;
+  padding-left: 8px;
+  width: 48px;
+}
+
+.tina-date-field .rdtMilli input {
+  width: 100%;
+  font-size: 1.2em;
+  margin-top: 37px;
+}
+
+.tina-date-field .rdtTime td {
+  cursor: default;
+}

package/src/lib/build-form.ts

@@ -0,0 +1,49 @@
+import { Field, Form, FormOptions, TinaCMS, TinaField } from 'tinacms'
+
+export type FieldType = Field & TinaField
+export type FormValues = Record<string, unknown>
+export type FormType = Form<FormValues, FieldType>
+
+type FormCreator = (formConfig: FormOptions<any>) => Form
+interface GlobalFormOptions {
+  icon?: any
+  layout: 'fullscreen' | 'popup'
+}
+type GlobalFormCreator = (
+  formConfig: FormOptions<any>,
+  options?: GlobalFormOptions
+) => Form
+interface GlobalFormOptions {
+  icon?: any
+  layout: 'fullscreen' | 'popup'
+}
+export interface FormifyArgs {
+  formConfig: FormOptions<any>
+  createForm: FormCreator
+  createGlobalForm: FormCreator
+  skip?: () => void
+}
+
+export type FormifyCallback = (args: FormifyArgs, cms: TinaCMS) => Form | void
+export type onSubmitArgs = {
+  /**
+   * @deprecated queryString is actually a mutation string, use `mutationString` instead
+   */
+  queryString: string
+  mutationString: string
+  variables: object
+}
+
+export const createForm = (formConfig: FormOptions<any, any>) => {
+  return new Form(formConfig)
+}
+export const createGlobalForm: GlobalFormCreator = (
+  formConfig,
+  options?: { icon?: any; layout: 'fullscreen' | 'popup' }
+) => {
+  const form = new Form({
+    ...formConfig,
+    global: { global: true, ...options },
+  })
+  return form
+}

package/src/lib/errors.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { TinaCMS } from 'tinacms'
+
+const ErrorModalContent = (props: { title: string; errors: string[] }) => {
+  const { title, errors } = props
+  return (
+    <>
+      <div>{title}</div>
+      <ul>
+        {errors.map((error, i) => (
+          <li key={i}>{error}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+export const showErrorModal = (
+  title: string,
+  errors: string[],
+  cms: TinaCMS
+) => {
+  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />)
+}

package/src/lib/expand-query.ts

@@ -0,0 +1,268 @@
+import * as G from 'graphql'
+
+export const expandQuery = ({
+  schema,
+  documentNode,
+}: {
+  schema: G.GraphQLSchema
+  documentNode: G.DocumentNode
+}): G.DocumentNode => {
+  const documentNodeWithTypenames = addTypenameToDocument(documentNode)
+  return addMetaFieldsToQuery(documentNodeWithTypenames, new G.TypeInfo(schema))
+}
+
+const addTypenameToDocument = (doc: G.DocumentNode) => {
+  function isField(selection: G.SelectionNode): selection is G.FieldNode {
+    return selection.kind === 'Field'
+  }
+  return G.visit(doc, {
+    SelectionSet: {
+      enter(node, _key, parent) {
+        // Don't add __typename to OperationDefinitions.
+        if (
+          parent &&
+          (parent as G.OperationDefinitionNode).kind ===
+            G.Kind.OPERATION_DEFINITION
+        ) {
+          return
+        }
+
+        // No changes if no selections.
+        const { selections } = node
+        if (!selections) {
+          return
+        }
+
+        // If selections already have a __typename, or are part of an
+        // introspection query, do nothing.
+        const skip = selections.some((selection) => {
+          return (
+            isField(selection) &&
+            (selection.name.value === '__typename' ||
+              selection.name.value.lastIndexOf('__', 0) === 0)
+          )
+        })
+        if (skip) {
+          return
+        }
+
+        // If this SelectionSet is @export-ed as an input variable, it should
+        // not have a __typename field (see issue #4691).
+        const field = parent as G.FieldNode
+        if (
+          isField(field) &&
+          field.directives &&
+          field.directives.some((d) => d.name.value === 'export')
+        ) {
+          return
+        }
+
+        // Create and return a new SelectionSet with a __typename Field.
+        return {
+          ...node,
+          selections: [...selections, TYPENAME_FIELD],
+        }
+      },
+    },
+  })
+}
+
+const CONTENT_SOURCE_FIELD: G.FieldNode = {
+  kind: G.Kind.FIELD,
+  name: {
+    kind: G.Kind.NAME,
+    value: '_content_source',
+  },
+}
+const METADATA_FIELD: G.FieldNode = {
+  kind: G.Kind.FIELD,
+  name: {
+    kind: G.Kind.NAME,
+    value: '_tina_metadata',
+  },
+}
+
+const TYPENAME_FIELD: G.FieldNode = {
+  kind: G.Kind.FIELD,
+  name: {
+    kind: G.Kind.NAME,
+    value: '__typename',
+  },
+}
+
+const addMetadataField = (
+  node: G.FieldNode | G.InlineFragmentNode | G.FragmentDefinitionNode
+): G.ASTNode => {
+  return {
+    ...node,
+    selectionSet: {
+      ...(node.selectionSet || {
+        kind: 'SelectionSet',
+        selections: [],
+      }),
+      selections:
+        [
+          ...(node.selectionSet?.selections || []),
+          METADATA_FIELD,
+          CONTENT_SOURCE_FIELD,
+        ] || [],
+    },
+  }
+}
+
+const addMetaFieldsToQuery = (
+  documentNode: G.DocumentNode,
+  typeInfo: G.TypeInfo
+) => {
+  const addMetaFields: G.VisitFn<G.ASTNode, G.FieldNode> = (
+    node: G.FieldNode
+  ): G.ASTNode => {
+    return {
+      ...node,
+      selectionSet: {
+        ...(node.selectionSet || {
+          kind: 'SelectionSet',
+          selections: [],
+        }),
+        selections:
+          [...(node.selectionSet?.selections || []), ...metaFields] || [],
+      },
+    }
+  }
+
+  const formifyVisitor: G.Visitor<G.ASTKindToNode, G.ASTNode> = {
+    FragmentDefinition: {
+      enter: (node, key, parent, path, ancestors) => {
+        typeInfo.enter(node)
+        const type = typeInfo.getType()
+        if (type) {
+          const namedType = G.getNamedType(type)
+          if (G.isObjectType(namedType)) {
+            if (namedType.getFields()['_tina_metadata']) {
+              return addMetadataField(node)
+            }
+          }
+          return node
+        }
+      },
+    },
+    InlineFragment: {
+      enter: (node, key, parent, path, ancestors) => {
+        typeInfo.enter(node)
+        const type = typeInfo.getType()
+        if (type) {
+          const namedType = G.getNamedType(type)
+          if (G.isObjectType(namedType)) {
+            if (namedType.getFields()['_tina_metadata']) {
+              return addMetadataField(node)
+            }
+          }
+          return node
+        }
+      },
+    },
+    Field: {
+      enter: (node, key, parent, path, ancestors) => {
+        typeInfo.enter(node)
+        const type = typeInfo.getType()
+        if (type) {
+          if (isNodeType(type)) {
+            return addMetaFields(node, key, parent, path, ancestors)
+          }
+          const namedType = G.getNamedType(type)
+          if (G.isObjectType(namedType)) {
+            if (namedType.getFields()['_tina_metadata']) {
+              return addMetadataField(node)
+            }
+            return node
+          }
+        }
+        return node
+      },
+    },
+  }
+  return G.visit(documentNode, G.visitWithTypeInfo(typeInfo, formifyVisitor))
+}
+/**
+ * This is a dummy query which we pull apart and spread
+ * back into the the selectionSet for all "Node" fields
+ */
+const node = G.parse(`
+ query Sample {
+  ...on Document {
+    _internalValues: _values
+    _internalSys: _sys {
+      breadcrumbs
+      basename
+      filename
+      path
+      extension
+      relativePath
+      title
+      template
+      collection {
+        name
+        slug
+        label
+        path
+        format
+        matches
+        templates
+        fields
+      }
+    }
+  }
+ }`)
+const metaFields: G.SelectionNode[] =
+  // @ts-ignore
+  node.definitions[0].selectionSet.selections
+
+export const isNodeType = (type: G.GraphQLOutputType) => {
+  const namedType = G.getNamedType(type)
+  if (G.isInterfaceType(namedType)) {
+    if (namedType.name === 'Node') {
+      return true
+    }
+  }
+  if (G.isUnionType(namedType)) {
+    const types = namedType.getTypes()
+    if (
+      types.every((type) => {
+        return type.getInterfaces().some((intfc) => intfc.name === 'Node')
+      })
+    ) {
+      return true
+    }
+  }
+  if (G.isObjectType(namedType)) {
+    if (namedType.getInterfaces().some((intfc) => intfc.name === 'Node')) {
+      return true
+    }
+  }
+}
+
+export const isConnectionType = (type: G.GraphQLOutputType) => {
+  const namedType = G.getNamedType(type)
+  if (G.isInterfaceType(namedType)) {
+    if (namedType.name === 'Connection') {
+      return true
+    }
+  }
+  if (G.isUnionType(namedType)) {
+    const types = namedType.getTypes()
+    if (
+      types.every((type) => {
+        return type.getInterfaces().some((intfc) => intfc.name === 'Connection')
+      })
+    ) {
+      return true
+    }
+  }
+  if (G.isObjectType(namedType)) {
+    if (
+      namedType.getInterfaces().some((intfc) => intfc.name === 'Connection')
+    ) {
+      return true
+    }
+  }
+}