How to use tinacms - 10 common examples

field.name === 'frontmatter' ||
        field.name.startsWith('frontmatter.')
      ) {
        return {
          ...field,
          name: field.name.replace('frontmatter', 'rawFrontmatter'),
        }
      }
      return field
    })

    return fields
  }, [formOverrrides.fields])

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const [, form] = useForm(
    {
      label,
      id,
      initialValues: valuesInGit,
      fields,
      onSubmit(data) {
        return cms.api.git.onSubmit!({
          files: [data.fileRelativePath],
          message: data.__commit_message || 'Tina commit',
          name: data.__commit_name,
          email: data.__commit_email,
        })
      },
      reset() {
        return cms.api.git.reset({ files: [id] })
      },

// }

  render() {
    const { Component, pageProps } = this.props
    return (
      
        
      
    )
  }
}

export default MyApp

// Duplicated from gatstby-tinacms-git
cms.registerApi('git', {
  onSubmit(data) {
    return commit(data)
  },
  onChange(data) {
    writeToDisk(data)
  },
  onUploadMedia(data) {
    writeMediaToDisk(data)
  },
  onDelete(data) {
    deleteFromDisk(data)
  },
  isAuthenticated() {
    return true
  },
})

export default function ExamplePage(props) {
  // grab the instance of the CMS to access the registered git API
  const cms = useCMS()

  // add a form to the CMS; store form data in `post`
  const [post, form] = useLocalForm({
    id: props.fileRelativePath,
    label: 'Edit Post', // needs to be unique
    // starting values for the post object
    initialValues: { title: props.title, headline: props.headline, markdown: props.markdown },
    // field definition
    fields: [
      { name: 'title', label: 'Title', component: 'text' },
      { name: 'headline', label: 'Headline', component: 'textarea' },
      {
        name: 'markdown',
        component: 'markdown',
        label: 'Post Body',
        description: 'Edit the body of the post here',
      },
    ], // save & commit the file when the "save" button is pressed
    onSubmit(data) {

export default function ExamplePage(props) {
  // grab the instance of the CMS to access the registered git API
  const cms = useCMS()

  // add a form to the CMS; store form data in `post`
  const [post, form] = useLocalForm({
    id: props.fileRelativePath,
    label: 'Edit Post', // needs to be unique
    // starting values for the post object
    initialValues: { title: props.title, headline: props.headline, markdown: props.markdown },
    // field definition
    fields: [
      { name: 'title', label: 'Title', component: 'text' },
      { name: 'headline', label: 'Headline', component: 'textarea' },
      {
        name: 'markdown',
        component: 'markdown',
        label: 'Post Body',
        description: 'Edit the body of the post here',

formOverrrides: Partial> = {}
): [RemarkNode | null | undefined, Form | null | undefined] {
  /**
   * We're returning early here which means all the hooks called by this hook
   * violate the rules of hooks. In the case of the check for
   * `NODE_ENV === 'production'` this should be a non-issue because NODE_ENV
   * will never change at runtime.
   */
  if (!markdownRemark || process.env.NODE_ENV === 'production') {
    return [markdownRemark, null]
  }

  validateMarkdownRemark(markdownRemark)

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const cms = useCMS()
  const label = formOverrrides.label || markdownRemark.frontmatter.title
  const id = markdownRemark.fileRelativePath
  const actions = formOverrrides.actions

  /**
   * The state of the RemarkForm, generated from the contents of the
   * Markdown file currently on disk. This state will contain any
   * un-committed changes in the Markdown file.
   */
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const valuesOnDisk = useMemo(
    () => ({
      fileRelativePath: markdownRemark.fileRelativePath,
      frontmatter: markdownRemark.frontmatter,
      rawMarkdownBody: markdownRemark.rawMarkdownBody,
      rawFrontmatter: JSON.parse(markdownRemark.rawFrontmatter),

label,
      fields,
      values: valuesOnDisk,
    }
  )

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const writeToDisk = React.useCallback(formState => {
    cms.api.git.onChange!({
      fileRelativePath: formState.values.fileRelativePath,
      content: toMarkdownString(formState.values),
    })
  }, [])

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  useWatchFormValues(form, writeToDisk)

  return [markdownRemark, form]
}

export function useLocalRemarkForm(
  markdownRemark: RemarkNode | null | undefined,
  formOverrrides: Partial> = {}
): [RemarkNode | null | undefined, Form | string | null | undefined] {
  const [values, form] = useRemarkForm(markdownRemark, formOverrrides)

  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore form can be `null` and usePlugins doesn't like that.
  usePlugins(form)

  return [values, form]
}

describe('Blocks', () => {
  const form = new Form({
    id: 'example',
    label: 'Example Form',
    fields: [],
    onSubmit() {},
  })

  describe('without data', () => {
    it('renders nothing into the containing element', () => {
      const renderedBlock = render(
        
      )

      expect(renderedBlock.container.children).toHaveLength(0)
    })
  })

})
    },
  })

  const writeToDisk = React.useCallback((formState) => {
    cms.api.git.writeToDisk({
      fileRelativePath: props.fileRelativePath,
      content: JSON.stringify({
        title: formState.values.title,
        headline: formState.values.headline,
        markdown: formState.values.markdown,
      }),
    })
  }, [])

  useWatchFormValues(form, writeToDisk)

  return (
    <>
      
            ),
          },
        ]}
      />

React.useMemo(() => {
      if (form) {
        return new GlobalFormPlugin(form, null)
      }
    }, [form])
  )