create-tina-app 0.1.4 → 0.1.7

package/examples/tina-tailwind-sidebar-demo/components/icon.js

@@ -1,264 +0,0 @@
-/**
-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 * as React from 'react'
-import { ThemeContext } from './theme'
-import {
-  BiCodeBlock,
-  BiLike,
-  BiMapAlt,
-  BiPalette,
-  BiPieChartAlt2,
-  BiPin,
-  BiShield,
-  BiSlider,
-  BiStore,
-  BiTennisBall,
-  BiTestTube,
-  BiTrophy,
-  BiUserCircle,
-  BiBeer,
-  BiChat,
-  BiCloud,
-  BiCoffeeTogo,
-  BiWorld,
-} from 'react-icons/bi'
-import { FiAperture } from 'react-icons/fi'
-
-const iconOptions = {
-  BiCodeBlock: BiCodeBlock,
-  BiLike: BiLike,
-  BiMapAlt: BiMapAlt,
-  BiPalette: BiPalette,
-  BiPieChartAlt2: BiPieChartAlt2,
-  BiPin: BiPin,
-  BiShield: BiShield,
-  BiSlider: BiSlider,
-  BiStore: BiStore,
-  BiTennisBall: BiTennisBall,
-  BiTestTube: BiTestTube,
-  BiTrophy: BiTrophy,
-  BiUserCircle: BiUserCircle,
-  BiBeer: BiBeer,
-  BiChat: BiChat,
-  BiCloud: BiCloud,
-  BiCoffeeTogo: BiCoffeeTogo,
-  BiWorld: BiWorld,
-  FiAperture: FiAperture,
-}
-
-export const Icon = ({ icon }) => {
-  const theme = React.useContext(ThemeContext)
-  const iconSize = icon?.size ? (icon.size === 'large' ? 14 : 9) : 14
-
-  const IconSVG = React.useMemo(() => {
-    return icon?.name ? iconOptions[icon?.name] : randomProperty(iconOptions)
-  }, [icon?.name])
-
-  const Component = React.useMemo(() => {
-    const iconColor =
-      icon?.color === 'primary' ? theme.color : icon?.color || 'blue'
-
-    if (!IconSVG) return null
-    if (icon?.style == 'circle') {
-      return (
-        <div
-          className={`relative z-10 inline-flex items-center justify-center flex-shrink-0 w-${iconSize} h-${iconSize} bg-${iconColor}-400 dark:bg-${iconColor}-500 text-${iconColor}-50 rounded-full`}
-          style={{
-            textShadow: '0 2px 5px rgba(0,0,0,0.1)',
-            boxShadow: `0 0.5rem 3rem 0px rgba(var(--color-rgb-${iconColor}-600),0.35)`,
-          }}
-        >
-          <IconSVG
-            className={`w-${Math.max(iconSize - 5, 6)} h-${Math.max(
-              iconSize - 5,
-              6
-            )}`}
-          />
-        </div>
-      )
-    } else {
-      return (
-        <IconSVG
-          className={`w-${iconSize} h-${iconSize} text-${iconColor}-400 dark:text-${iconColor}-500`}
-          style={{
-            filter: `drop-shadow(0 0.5rem 1rem rgba(var(--color-rgb-${iconColor}-600),0.4))`,
-          }}
-        />
-      )
-    }
-  }, [icon?.style, IconSVG, icon?.color, theme.color])
-
-  return Component
-}
-
-export const ICON_FIELDS = [
-  {
-    label: 'Icon',
-    name: 'icon',
-    component: 'group',
-    fields: [
-      {
-        name: 'color',
-        label: 'Color',
-        component: 'select',
-        options: [
-          {
-            label: 'Primary (Theme)',
-            value: 'primary',
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-          },
-          {
-            label: 'Teal',
-            value: 'teal',
-          },
-          {
-            label: 'Green',
-            value: 'green',
-          },
-          {
-            label: 'Red',
-            value: 'red',
-          },
-          {
-            label: 'Pink',
-            value: 'pink',
-          },
-          {
-            label: 'Purple',
-            value: 'purple',
-          },
-          {
-            label: 'Orange',
-            value: 'orange',
-          },
-          {
-            label: 'Yellow',
-            value: 'yellow',
-          },
-        ],
-      },
-      {
-        name: 'name',
-        label: 'Icon',
-        component: 'select',
-        options: [
-          {
-            label: 'Random',
-            value: '',
-          },
-          {
-            label: 'Aperture',
-            value: 'FiAperture',
-          },
-          {
-            label: 'Code Block',
-            value: 'BiCodeBlock',
-          },
-          {
-            label: 'Like',
-            value: 'BiLike',
-          },
-          {
-            label: 'Map',
-            value: 'BiMapAlt',
-          },
-          {
-            label: 'Palette',
-            value: 'BiPalette',
-          },
-          {
-            label: 'Pie Chart',
-            value: 'BiPieChartAlt2',
-          },
-          {
-            label: 'Pin',
-            value: 'BiPin',
-          },
-          {
-            label: 'Shield',
-            value: 'BiShield',
-          },
-          {
-            label: 'Setting Sliders',
-            value: 'BiSlider',
-          },
-          {
-            label: 'Store',
-            value: 'BiStore',
-          },
-          {
-            label: 'Tennis Ball',
-            value: 'BiTennisBall',
-          },
-          {
-            label: 'Test Tube',
-            value: 'BiTestTube',
-          },
-          {
-            label: 'Trophy',
-            value: 'BiTrophy',
-          },
-          {
-            label: 'User',
-            value: 'BiUserCircle',
-          },
-          {
-            label: 'Beer',
-            value: 'BiBeer',
-          },
-          {
-            label: 'Chat',
-            value: 'BiChat',
-          },
-          {
-            label: 'Cloud',
-            value: 'BiCloud',
-          },
-          {
-            label: 'Coffee',
-            value: 'BiCoffeeTogo',
-          },
-          {
-            label: 'World',
-            value: 'BiWorld',
-          },
-        ],
-      },
-      {
-        name: 'style',
-        label: 'Style',
-        component: 'radio-group',
-        variant: 'button',
-        options: [
-          {
-            label: 'Circle',
-            value: 'circle',
-          },
-          {
-            label: 'Float',
-            value: 'float',
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const randomProperty = (obj) => {
-  var keys = Object.keys(obj)
-  return obj[keys[(keys.length * Math.random()) << 0]]
-}

package/examples/tina-tailwind-sidebar-demo/components/modal.js

@@ -1,79 +0,0 @@
-/**
-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 * as React from 'react'
-import {
-  Modal,
-  PopupModal,
-  ModalHeader,
-  ModalBody,
-  ModalActions,
-  FieldsGroup,
-} from 'tinacms'
-import { Button } from '@tinacms/styles'
-
-export function TinaModal({
-  title = 'Save Changes',
-  close = () => {},
-  data = {},
-}) {
-  function handleClose(event) {
-    event.stopPropagation()
-    event.preventDefault()
-    close()
-  }
-
-  return (
-    <Modal id="tina-modal" onClick={(e) => e.stopPropagation()}>
-      <PopupModal>
-        <ModalHeader close={close}>{title}</ModalHeader>
-        <ModalBody>
-          <FieldsGroup>
-            <div>
-              <h3 className="font-bold text-xl mb-3">
-                You control what happens with your data.
-              </h3>
-              <p className="whitespace-normal mb-3">
-                Currently there are packages to support Git workflows, but Tina
-                is designed to potentially work with any data source.
-              </p>
-              <details className="mb-4 px-2 pt-2 bg-gray-200 border border-gray-300 rounded">
-                <summary className="list-none display-block cursor-pointer text-blue-500 hover:text-blue-700 mb-2 outline-none select-none">
-                  View Raw JSON
-                </summary>
-                <pre className="mb-2 text-sm overflow-scroll">
-                  <code className="leading-none">
-                    {JSON.stringify(data, null, 2)}
-                  </code>
-                </pre>
-              </details>
-            </div>
-          </FieldsGroup>
-        </ModalBody>
-        <ModalActions>
-          <Button
-            primary
-            onClick={() => {
-              window.location = 'https://tina.io/docs/getting-started/backends/'
-            }}
-          >
-            <span className="whitespace-nowrap inline-block">
-              Read The Docs
-            </span>
-          </Button>
-          <Button onClick={handleClose}>Close</Button>
-        </ModalActions>
-      </PopupModal>
-    </Modal>
-  )
-}

package/examples/tina-tailwind-sidebar-demo/components/nav.tsx

@@ -1,121 +0,0 @@
-/**
-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 * as React from 'react'
-import { ThemeContext } from './theme'
-import { Section } from './section'
-import { Icon, ICON_FIELDS } from './icon'
-import { BiSun } from 'react-icons/bi'
-import { RiMoonClearLine } from 'react-icons/ri'
-import { Homepage_Nav_Data, Maybe } from '../.tina/__generated__/types'
-
-export const Nav = ({ nav }: { nav?: Maybe<Homepage_Nav_Data> }) => {
-  const theme = React.useContext(ThemeContext)
-
-  return (
-    <Section>
-      <div className="relative flex flex-col flex-wrap py-8 px-8 lg:px-12 2xl:px-16 mx-auto md:items-center md:flex-row">
-        <a
-          href="#"
-          className="pr-2 lg:pr-8 mb-8 md:mb-0 focus:outline-none flex items-center"
-        >
-          <div className="inline-flex items-center">
-            <div className={`mr-2`}>
-              <Icon icon={nav?.wordmark?.icon || ''} />
-            </div>
-            <h2 className="font-bold tracking-tight transition duration-150 ease-out transform text-blueGray-500 dark:text-blueGray-200 lg:text-md text-bold">
-              {nav?.wordmark?.name || ''}
-            </h2>
-          </div>
-        </a>
-        <div className="flex-grow md:flex md:justify-end">
-          <nav className="flex flex-wrap items-center justify-between sm:justify-end text-base -mx-2 sm:-mx-6 md:mx-0">
-            {nav?.items?.map(function (item, index) {
-              return (
-                <a
-                  key={index}
-                  href="#"
-                  className={`mx-2 sm:mx-6 md:mx-8 text-sm tracking-wide font-semibold transition duration-150 ease-out text-gray-600 dark:text-gray-200`}
-                >
-                  {item.label}
-                </a>
-              )
-            })}
-          </nav>
-          <button
-            onClick={() => {
-              // @ts-ignore
-              theme.toggleThemeMode()
-            }}
-            type="button"
-            className="ml-8 outline-none opacity-30 hover:opacity-70 focus:opacity-100 focus:outline-none transparent absolute top-9 right-6  md:relative md:top-auto md:right-auto transition duration-150 ease-out"
-            aria-pressed="false"
-          >
-            <BiSun
-              className={`w-6 h-6 transition duration-300 ease-out transform ${
-                // @ts-ignore
-                theme.themeMode === 'light' && 'opacity-0 rotate-90'
-              }`}
-            />
-            <RiMoonClearLine
-              className={`w-6 h-6 absolute top-0 left-0 transition duration-300 ease-out transform  ${
-                // @ts-ignore
-                theme.themeMode === 'dark' && 'opacity-0 -rotate-90'
-              }`}
-            />
-          </button>
-        </div>
-      </div>
-    </Section>
-  )
-}
-
-export const NAV_FIELDS = [
-  {
-    label: 'Wordmark',
-    name: 'wordmark',
-    component: 'group',
-    fields: [
-      ...ICON_FIELDS,
-      {
-        label: 'Name',
-        name: 'name',
-        component: 'text',
-      },
-    ],
-  },
-  {
-    label: 'Nav Items',
-    name: 'items',
-    component: 'group-list',
-    itemProps: (item) => ({
-      label: item.label,
-    }),
-    defaultItem: () => ({
-      label: 'Nav Link',
-      link: '/',
-    }),
-    fields: [
-      {
-        label: 'Label',
-        name: 'label',
-        component: 'text',
-      },
-      {
-        label: 'Link',
-        name: 'link',
-        component: 'text',
-      },
-    ],
-  },
-]

package/examples/tina-tailwind-sidebar-demo/components/section.js

@@ -1,53 +0,0 @@
-/**
-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 * as React from 'react'
-import { ThemeContext } from './theme'
-
-export const Section = ({ variant = 'default', children }) => {
-  const theme = React.useContext(ThemeContext)
-
-  let variantClasses = `relative transition duration-150 ease-out text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 body-font overflow-hidden`
-
-  if (variant === 'tint') {
-    variantClasses = `relative transition duration-150 ease-out text-gray-700 dark:text-gray-100 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 body-font overflow-hidden`
-  }
-
-  if (variant === 'primary') {
-    variantClasses = `relative transition duration-150 ease-out text-gray-700 dark:text-gray-100 bg-${theme.color}-700 bg-gradient-to-br from-${theme.color}-500 to-${theme.color}-300 dark:from-${theme.color}-500 dark:to-${theme.color}-700 body-font overflow-hidden`
-  }
-
-  return <section className={variantClasses}>{children}</section>
-}
-
-export const SectionFields = [
-  {
-    name: 'color',
-    label: 'Color',
-    component: 'select',
-    options: [
-      {
-        label: 'Default',
-        value: 'default',
-      },
-      {
-        label: 'Tint',
-        value: 'tint',
-      },
-      {
-        label: 'Primary',
-        value: 'primary',
-      },
-    ],
-  },
-]

package/examples/tina-tailwind-sidebar-demo/components/testimonial.tsx

@@ -1,87 +0,0 @@
-/**
-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 * as React from 'react'
-import { ThemeContext } from './theme'
-import { Section, SectionFields } from './section'
-import { Testimonial_Data } from '../.tina/__generated__/types'
-
-export const Testimonial = (props: Testimonial_Data) => {
-  const theme = React.useContext(ThemeContext)
-
-  return (
-    <Section variant={props?.style?.color || 'blue'}>
-      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
-        <div className="relative">
-          <blockquote>
-            <div className="relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-extrabold tracking-normal text-center title-font text-white">
-              <span
-                className={`block opacity-20 text-black text-${theme.color}-700 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1`}
-              >
-                &ldquo;
-              </span>
-              <p className="relative opacity-95">{props.quote}</p>
-              <span
-                className={`block opacity-20 text-black text-${theme.color}-800 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1`}
-              >
-                &rdquo;
-              </span>
-            </div>
-            <div className={`my-8 flex-grow-0`}>
-              <span
-                className={`block mx-auto h-0.5 w-1/6 bg-${theme.color}-300 dark:bg-${theme.color}-700 opacity-70`}
-              ></span>
-            </div>
-            <footer className="text-center">
-              <p
-                className={`tracking-wide title-font font-bold text-base text-${theme.color}-500 dark:text-${theme.color}-300`}
-              >
-                {props.author}
-              </p>
-            </footer>
-          </blockquote>
-        </div>
-      </div>
-    </Section>
-  )
-}
-
-export const testimonial_template = {
-  label: 'Testimonial',
-  defaultItem: {
-    quote:
-      'There are only two hard things in Computer Science: cache invalidation and naming things.',
-    author: 'Phil Karlton',
-    style: {
-      color: 'primary',
-    },
-  },
-  fields: [
-    {
-      name: 'quote',
-      label: 'Quote',
-      component: 'textarea',
-    },
-    {
-      name: 'author',
-      label: 'Author',
-      component: 'text',
-    },
-    {
-      name: 'style',
-      label: 'Style',
-      component: 'group',
-      fields: [...SectionFields],
-    },
-  ],
-}

package/examples/tina-tailwind-sidebar-demo/components/theme.tsx

@@ -1,81 +0,0 @@
-/**
-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 * as React from 'react'
-import { Theme_Document } from '../.tina/__generated__/types'
-
-export const ThemeContext = React.createContext(null as any)
-
-const getInitialThemeMode = (_) => {
-  if (typeof window !== 'undefined') {
-    if (window.localStorage) {
-      const storedPrefs = window.localStorage.getItem('theme-mode')
-
-      if (typeof storedPrefs === 'string') {
-        return storedPrefs
-      }
-    }
-
-    const userMedia = window.matchMedia('(prefers-color-scheme: dark)')
-
-    if (userMedia.matches) {
-      return 'dark'
-    }
-  }
-
-  return 'light'
-}
-
-const updateRenderColorMode = (themeMode) => {
-  if (typeof window !== 'undefined') {
-    const root = window.document.documentElement
-    root.classList.remove('dark')
-    root.classList.remove('light')
-    root.classList.add(themeMode)
-  }
-}
-
-export const Theme: React.FC<{
-  theme: {
-    getThemeDocument: Theme_Document
-  }
-}> = ({ children, theme }) => {
-  const [themeMode, setThemeMode] = React.useState(getInitialThemeMode(''))
-
-  const toggleThemeMode = () => {
-    let newMode = ''
-
-    if (themeMode === 'light') {
-      newMode = 'dark'
-    } else {
-      newMode = 'light'
-    }
-
-    setThemeMode(newMode)
-
-    if (typeof window !== 'undefined' && window.localStorage) {
-      window.localStorage.setItem('theme-mode', newMode)
-    }
-  }
-
-  React.useEffect(() => {
-    updateRenderColorMode(themeMode)
-  }, [themeMode])
-
-  const themeData = theme.getThemeDocument.data
-  return (
-    <ThemeContext.Provider value={{ themeMode, toggleThemeMode, ...themeData }}>
-      {children}
-    </ThemeContext.Provider>
-  )
-}