@tinacms/app 0.0.11 → 0.0.12

package/appFiles/lib/machines/util.ts

@@ -0,0 +1,205 @@
+/**
+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 { DocumentBlueprint } from '../formify/types'
+
+type Location = number[] | null
+
+export const getBlueprintValues = (
+  data: object,
+  path: string,
+  index: number = 0
+): string[] | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: string[] = []
+      data.forEach((item) => {
+        const res = getBlueprintValues(item, path, index + 1)
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        return value
+      } else {
+        return [value]
+      }
+    } else {
+      return getBlueprintValues(value, path)
+    }
+  }
+}
+
+export const getAllIn = (
+  data: object | object[] | null,
+  path: string,
+  index: number = 0,
+  location: Location = null
+): { value: { id: string }; location: Location }[] | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: { value: { id: string }; location: Location }[] = []
+      data.forEach((item, dataIndex) => {
+        const res = getAllIn(item, path, index + 1, [
+          ...(location || []),
+          dataIndex,
+        ])
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        const v = value.map((item, index) => ({
+          value: item,
+          location: [...(location || []), index],
+        }))
+        return v
+      } else {
+        if (typeof value === 'string') {
+          const v = [{ value: { id: value }, location }]
+          return v
+        } else {
+          // FIXME: this should always be `_internalSys.path` but we're not populating the
+          // data properly on resolveData yet. But even when we are, will need to keep that out
+          // of the user-provided payload (maybe not?)
+          const id = value?._internalSys?.path || value?.id
+          if (id) {
+            const v = [{ value: { id, ...value }, location }]
+            return v
+          }
+        }
+      }
+    } else {
+      const v = getAllIn(value, path, index + 1, location)
+      return v
+    }
+  }
+}
+export const getAllInBlueprint = (
+  data: object | object[] | null,
+  path: string,
+  index: number = 0,
+  location: Location = null
+):
+  | { value: { _internalSys: { path: string } }; location: Location }[]
+  | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: {
+        value: { _internalSys: { path: string } }
+        location: Location
+      }[] = []
+      data.forEach((item, dataIndex) => {
+        const res = getAllInBlueprint(item, path, index + 1, [
+          ...(location || []),
+          dataIndex,
+        ])
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        throw new Error(`Unexpected array value for getAllInBlueprint`)
+      } else {
+        if (typeof value === 'string') {
+          throw new Error(`Unexpected string value for getAllInBlueprint`)
+        } else {
+          const id = value?._internalSys?.path || value?.id
+          if (id) {
+            const v = [
+              { value: { _internalSys: value._internalSys }, location },
+            ]
+            return v
+          }
+        }
+      }
+    } else {
+      const v = getAllInBlueprint(value, path, index + 1, location)
+      return v
+    }
+  }
+}
+
+export const getBlueprintFromLocation = (
+  location: string,
+  blueprints: DocumentBlueprint[]
+) => {
+  const blueprintString = location
+    .split('.')
+    .map((item) => (isNaN(Number(item)) ? item : '[]'))
+    .join('.')
+  const blueprint = blueprints.find(({ id }) => id === blueprintString)
+  if (!blueprint) {
+    throw new Error(`Unable to find blueprint at ${blueprintString}`)
+  }
+  return blueprint
+}
+
+// FIXME: this assumes children are in order (which they
+// are AFAIK but shouldn't be relied on)
+export const getBlueprintChildren = (
+  blueprint: DocumentBlueprint,
+  blueprints: DocumentBlueprint[]
+) => {
+  const foundChildren: DocumentBlueprint[] = []
+  blueprints.forEach((otherBlueprint) => {
+    if (foundChildren.find(({ id }) => otherBlueprint.id.startsWith(id))) {
+      return
+    }
+    if (
+      otherBlueprint.id.startsWith(blueprint.id) &&
+      otherBlueprint.id !== blueprint.id
+    ) {
+      foundChildren.push(otherBlueprint)
+    }
+  })
+  return foundChildren
+}

package/appFiles/src/App.tsx

@@ -12,17 +12,26 @@ limitations under the License.
 */
 
 import React from 'react'
-import TinaCMS, { TinaAdmin } from 'tinacms'
+import TinaCMS, { TinaAdmin, useCMS } from 'tinacms'
 import { TinaEditProvider, useEditState } from 'tinacms/dist/edit-state'
+import { Preview } from './preview'
 
 // TODO: Resolve this to local file in tsconfig.json
 // @ts-expect-error
 import config from 'TINA_IMPORT'
 
+const SetPreview = ({ outputFolder }: { outputFolder: string }) => {
+  const cms = useCMS()
+  cms.flags.set('tina-preview', outputFolder)
+  return null
+}
+
 export const TinaAdminWrapper = () => {
   return (
-    <TinaCMS {...config}>
-      <TinaAdmin />
+    // @ts-ignore JSX element type 'TinaCMS' does not have any construct or call signatures.ts(2604)
+     <TinaCMS {...config} client={{ apiUrl: __API_URL__ }}>
+      <SetPreview outputFolder={config.build.outputFolder} />
+      <TinaAdmin preview={<Preview {...config} />} />
     </TinaCMS>
   )
 }

package/appFiles/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/appFiles/src/main.tsx

@@ -13,6 +13,7 @@ limitations under the License.
 
 import React from 'react'
 import ReactDOM from 'react-dom'
+import './index.css'
 import App from './App'
 
 ReactDOM.render(

package/appFiles/src/preview/index.tsx

@@ -0,0 +1,150 @@
+/**
+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 React from 'react'
+import { useMachine } from '@xstate/react'
+import { queryMachine, initialContext } from '../../lib/machines/query-machine'
+import { ChevronRightIcon, textFieldClasses, useCMS } from 'tinacms'
+import { ArrowRightIcon, ChevronLeftIcon } from '@heroicons/react/outline'
+import { useSearchParams } from 'react-router-dom'
+
+export const Preview = (props) => {
+  const cms = useCMS()
+  const [searchParams, setSearchParams] = useSearchParams()
+  React.useEffect(() => {
+    // We'll often land here with the preview route in the URL (eg. ?iframe-url=/posts)
+    setSearchParams({})
+  }, [])
+  const machine = React.useMemo(
+    () =>
+      queryMachine.withContext({
+        ...initialContext,
+        url:
+          searchParams.get('iframe-url') ||
+          localStorage.getItem('tina-url') ||
+          '/',
+        cms,
+        formifyCallback: props.formifyCallback,
+      }),
+    []
+  )
+
+  const [state, send] = useMachine(machine)
+  const ref = React.useRef<HTMLIFrameElement>(null)
+
+  React.useEffect(() => {
+    if (ref.current) {
+      send({ type: 'IFRAME_MOUNTED', value: ref.current })
+      window.addEventListener('message', (event) => {
+        console.log('parent: event received', event.data.type)
+        if (event.data.type === 'open') {
+          send({ type: 'ADD_QUERY', value: event.data })
+        }
+        if (event.data.type === 'close') {
+          send({ type: 'REMOVE_QUERY', value: event.data.id })
+        }
+      })
+    }
+  }, [ref.current])
+  React.useEffect(() => {
+    setInterval(() => {
+      if (ref.current) {
+        const href = ref.current.contentWindow?.location.pathname
+        if (href) {
+          if (href === 'blank') return
+
+          send({
+            type: 'SET_DISPLAY_URL',
+            value: href,
+          })
+        }
+      }
+    }, 300)
+  }, [ref.current])
+
+  return (
+    <div className="h-full overflow-scroll">
+      <div className="">
+        <div className="col-span-5 ">
+          <div className="h-screen flex flex-col">
+            <div className="col-span-2 bg-gray-50 border-b border-gray-200">
+              <div className="px-16 py-3 flex gap-3">
+                <div className="relative flex-1">
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault()
+                      send({ type: 'UPDATE_URL' })
+                    }}
+                  >
+                    <input
+                      type="text"
+                      style={{ borderRadius: '50px' }}
+                      className={`${textFieldClasses}`}
+                      onChange={(e) =>
+                        send({ type: 'SET_INPUT_URL', value: e.target.value })
+                      }
+                      value={
+                        state.context.inputURL !== null
+                          ? state.context.inputURL
+                          : state.context.displayURL || state.context.url
+                      }
+                    />
+                    <div className="absolute right-2 top-0 bottom-0 flex items-center">
+                      <button
+                        className={`relative inline-flex items-center px-2 py-2 rounded-full border text-sm font-medium focus:z-10 focus:outline-none focus:ring-1 ${
+                          state.context.inputURL
+                            ? 'border-blue-300 bg-blue-500 text-white hover:bg-blue-400'
+                            : 'border-gray-300 bg-white text-gray-500 hover:bg-gray-50'
+                        } focus:ring-blue-500 focus:border-blue-500`}
+                      >
+                        <span className="sr-only">Go</span>
+                        <ArrowRightIcon
+                          className="h-3 w-3"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </div>
+                  </form>
+                </div>
+                <span className="relative z-0 inline-flex shadow-sm rounded-md">
+                  <button
+                    type="button"
+                    onClick={() => history.back()}
+                    className="relative inline-flex items-center px-2 py-2 rounded-l-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                  >
+                    <span className="sr-only">Previous</span>
+                    <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => history.forward()}
+                    className="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                  >
+                    <span className="sr-only">Next</span>
+                    <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+                  </button>
+                </span>
+              </div>
+            </div>
+            <div className="relative flex-1 bg-gray-300 col-span-2 overflow-scroll flex items-center justify-center">
+              <iframe
+                ref={ref}
+                className="h-full w-full bg-white"
+                src={state.context.url}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/appFiles/src/vite-env.d.ts

@@ -12,3 +12,5 @@ limitations under the License.
 */
 
 /// <reference types="vite/client" />
+/** This value is injected globally at build time */
+declare const __API_URL__: string

package/dist/index.d.ts

@@ -1 +1 @@
-export * from "../src/index"
+export declare const viteBuild: (args: any) => any