@tinacms/app 0.0.0-003e348-20251023020516

package/src/lib/types.ts

@@ -0,0 +1,53 @@
+export type PostMessage =
+  | {
+      type: 'open' | 'close' | 'isEditMode';
+      id: string;
+      data: object;
+    }
+  | { type: 'field:selected'; fieldName: string }
+  | { type: 'quick-edit'; value: boolean }
+  | { type: 'user-select-form'; formId: string }
+  | { type: 'url-changed' };
+
+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,129 @@
+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
+) => {
+  const metadata = getDeepestMetadata(object, eventFieldName);
+
+  if (!metadata) {
+    console.warn(
+      '[getFormAndFieldNameFromMetadata] No metadata found for:',
+      eventFieldName
+    );
+    return { formId: undefined, fieldName: undefined };
+  }
+
+  const { id: formId, prefix } = metadata;
+  const prefixLength = prefix?.length ?? 0;
+  const localFieldName = eventFieldName.slice(prefixLength + 1);
+
+  return {
+    formId,
+    fieldName: localFieldName,
+  };
+};

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/*"]
+}