@tinacms/app 0.0.0-00f6525-20241015065741

package/src/lib/types.ts

@@ -0,0 +1,51 @@
+export type PostMessage =
+  | {
+      type: 'open' | 'close' | 'isEditMode'
+      id: string
+      data: object
+    }
+  | { type: 'field:selected'; fieldName: string }
+  | { type: 'quick-edit'; value: boolean }
+
+export type Payload = {
+  id: string
+  variables: object
+  query: string
+  data: object
+  expandedQuery?: string
+  expandedData?: object
+  expandedQueryForResolver?: string
+}
+
+export type SystemInfo = {
+  breadcrumbs: string[]
+  basename: string
+  filename: string
+  path: string
+  extension: string
+  relativePath: string
+  title?: string | null | undefined
+  template: string
+  // __typename: string
+  collection: {
+    name: string
+    slug: string
+    label: string
+    path: string
+    format?: string | null | undefined
+    matches?: string | null | undefined
+    // templates?: object
+    // fields?: object
+    // __typename: string
+  }
+}
+
+export type Document = {
+  _values: Record<string, unknown>
+  _sys: SystemInfo
+}
+
+export type ResolvedDocument = {
+  _internalValues: Record<string, unknown>
+  _internalSys: SystemInfo
+}

package/src/lib/util.ts

@@ -0,0 +1,134 @@
+const charCodeOfDot = '.'.charCodeAt(0)
+const reEscapeChar = /\\(\\)?/g
+const rePropName = RegExp(
+  // Match anything that isn't a dot or bracket.
+  '[^.[\\]]+' +
+    '|' +
+    // Or match property names within brackets.
+    '\\[(?:' +
+    // Match a non-string expression.
+    '([^"\'][^[]*)' +
+    '|' +
+    // Or match strings (supports escaping characters).
+    '(["\'])((?:(?!\\2)[^\\\\]|\\\\.)*?)\\2' +
+    ')\\]' +
+    '|' +
+    // Or match "" as the space between consecutive dots or empty brackets.
+    '(?=(?:\\.|\\[\\])(?:\\.|\\[\\]|$))',
+  'g'
+)
+
+/**
+ * Converts `string` to a property path array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the property path array.
+ */
+const stringToPath = (string: string) => {
+  const result = []
+  if (string.charCodeAt(0) === charCodeOfDot) {
+    result.push('')
+  }
+  string.replace(rePropName, (match, expression, quote, subString) => {
+    let key = match
+    if (quote) {
+      key = subString.replace(reEscapeChar, '$1')
+    } else if (expression) {
+      key = expression.trim()
+    }
+    result.push(key)
+  })
+  return result
+}
+
+const keysCache: { [key: string]: string[] } = {}
+const keysRegex = /[.[\]]+/
+
+const toPath = (key: string): string[] => {
+  if (key === null || key === undefined || !key.length) {
+    return []
+  }
+  if (typeof key !== 'string') {
+    throw new Error('toPath() expects a string')
+  }
+  if (keysCache[key] == null) {
+    /**
+     * The following patch fixes issue 456, introduced since v4.20.3:
+     *
+     * Before v4.20.3, i.e. in v4.20.2, a `key` like 'choices[]' would map to ['choices']
+     * (e.g. an array of choices used where 'choices[]' is name attribute of an input of type checkbox).
+     *
+     * Since v4.20.3, a `key` like 'choices[]' would map to ['choices', ''] which is wrong and breaks
+     * this kind of inputs e.g. in React.
+     *
+     * v4.20.3 introduced an unwanted breaking change, this patch fixes it, see the issue at the link below.
+     *
+     * @see https://github.com/final-form/final-form/issues/456
+     */
+    if (key.endsWith('[]')) {
+      // v4.20.2 (a `key` like 'choices[]' should map to ['choices'], which is fine).
+      keysCache[key] = key.split(keysRegex).filter(Boolean)
+    } else {
+      // v4.20.3 (a `key` like 'choices[]' maps to ['choices', ''], which breaks applications relying on inputs like `<input type="checkbox" name="choices[]" />`).
+      keysCache[key] = stringToPath(key)
+    }
+  }
+  return keysCache[key]
+}
+export const getDeepestMetadata = (state: Object, complexKey: string): any => {
+  // Intentionally using iteration rather than recursion
+  const path = toPath(complexKey)
+  let current: any = state
+  let metadata: any
+  for (let i = 0; i < path.length; i++) {
+    const key = path[i]
+    if (
+      current === undefined ||
+      current === null ||
+      typeof current !== 'object' ||
+      (Array.isArray(current) && isNaN(Number(key)))
+    ) {
+      return undefined
+    }
+    const value = current[key]
+    if (value?._tina_metadata) {
+      // We're at a reference field, we don't want to select the
+      // reference form, just the reference select field
+      if (complexKey === value._tina_metadata?.prefix && metadata) {
+      } else {
+        metadata = value._tina_metadata
+      }
+    }
+    current = value
+  }
+  return metadata
+}
+export const getFormAndFieldNameFromMetadata = (
+  object: object,
+  eventFieldName: string
+) => {
+  let formId
+  let n
+  const value = getDeepestMetadata(object, eventFieldName)
+  if (value) {
+    if (value.prefix) {
+      const fieldName = eventFieldName.slice(value?.prefix?.length + 1)
+      const localFieldName = value.name
+        ? fieldName.slice(value?.name?.length + 1)
+        : fieldName
+      if (localFieldName) {
+        // If localFieldName is tags.2, just use `tags`
+        if (!isNaN(Number(localFieldName.split('.')[1]))) {
+          n = value.fields[localFieldName.split('.')[0]]
+        } else {
+          n = value.fields[localFieldName]
+        }
+      } else {
+        n = value.name
+      }
+      formId = value.id
+    }
+  }
+  return { formId, fieldName: n }
+}

package/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const container = document.getElementById('root')
+const root = createRoot(container!)
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/src/preflight.css

@@ -0,0 +1,233 @@
+body {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  ::before,
+  ::after {
+    --tw-content: '';
+  }
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: theme(
+      'fontFamily.mono',
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace
+    ); /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: inherit; /* 1 */
+    color: inherit; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 3 */
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* 1 */
+    background-image: none; /* 2 */
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li:before {
+    display: none;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1; /* 1 */
+    color: theme('colors.gray.400', #9ca3af); /* 2 */
+  }
+
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  [hidden] {
+    display: none;
+  }
+}

package/src/preview.tsx

@@ -0,0 +1,27 @@
+/**
+
+*/
+import React from 'react'
+import { defineConfig } from 'tinacms'
+import { useGraphQLReducer } from './lib/graphql-reducer'
+
+type Config = Parameters<typeof defineConfig>[0]
+
+export const Preview = (
+  props: Config & {
+    url: string
+    iframeRef: React.MutableRefObject<HTMLIFrameElement>
+  }
+) => {
+  useGraphQLReducer(props.iframeRef, props.url)
+
+  return (
+    <iframe
+      data-test="tina-iframe"
+      id="tina-iframe"
+      ref={props.iframeRef}
+      className="h-screen w-full bg-white"
+      src={props.url}
+    />
+  )
+}

package/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/**
+
+*/
+
+/// <reference types="vite/client" />
+declare const __API_URL__: string
+declare const __BASE_PATH__: string
+declare const __TINA_GRAPHQL_VERSION__: string

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "exclude": [
+    "node_modules",
+    "**/node_modules/*"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
+  "exclude": ["node_modules", "**/node_modules/*"]
+}