create-tina-app 0.1.4 → 0.1.7

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

@@ -1,114 +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 { BiRightArrowAlt } from 'react-icons/bi'
-
-export const Actions = ({ actions }) => {
-  const theme = React.useContext(ThemeContext)
-  return (
-    <div className="w-full">
-      <div className="flex flex-wrap items-center -mx-3 -my-2">
-        {actions &&
-          actions.map(function (action, index) {
-            let element = null
-            if (action.type === 'button') {
-              element = (
-                <button
-                  key={index}
-                  className={`z-10 relative flex items-center px-7 py-3 mx-3 my-2 font-semibold text-lg transition duration-150 ease-out text-white transition duration-500 ease-in-out ${
-                    theme?.btnStyle === 'rounded' && `rounded-lg`
-                  } ${
-                    theme?.btnStyle === 'round' && `rounded-full`
-                  } transform bg-${theme.color}-500 hover:bg-${
-                    theme.color
-                  }-600 bg-gradient-to-r from-${theme.color}-400 to-${
-                    theme.color
-                  }-600 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap`}
-                  style={{
-                    textShadow: '0 2px 5px rgba(0,0,0,0.1)',
-                    boxShadow: `0 0.5rem 3rem 0px rgba(var(--color-rgb-${theme.color}-600),0.35)`,
-                  }}
-                >
-                  {action.label}
-                  {action.icon && (
-                    <BiRightArrowAlt
-                      className={`ml-1 -mr-1 w-6 h-6 text-${theme.color}-50`}
-                    />
-                  )}
-                </button>
-              )
-            }
-            if (action.type === 'link' || action.type === 'linkExternal') {
-              element = (
-                <a
-                  key={index}
-                  href="#"
-                  className={`inline-flex items-center font-semibold mx-3 my-2 text-lg transition duration-150 ease-out text-${theme.color}-600 dark:text-${theme.color}-400 hover:text-${theme.color}-400 dark:hover:text-${theme.color}-500`}
-                  style={{
-                    textShadow: `0 3px 7px rgba(var(--color-rgb-${theme.color}-400),0.2)`,
-                  }}
-                >
-                  {action.label}
-                  {action.icon && (
-                    <BiRightArrowAlt
-                      className={`ml-0 mr-0 w-6 h-6 text-${theme.color}-500`}
-                    />
-                  )}
-                </a>
-              )
-            }
-            return element
-          })}
-      </div>
-    </div>
-  )
-}
-
-export const ACTION_FIELDS = [
-  {
-    label: 'Actions',
-    name: 'actions',
-    component: 'group-list',
-    itemProps: (item) => ({
-      label: item.label,
-    }),
-    defaultItem: () => ({
-      label: 'Action Label',
-      type: 'button',
-    }),
-    fields: [
-      {
-        label: 'Label',
-        name: 'label',
-        component: 'text',
-      },
-      {
-        label: 'Type',
-        name: 'type',
-        component: 'radio-group',
-        variant: 'button',
-        options: [
-          { label: 'Button', value: 'button' },
-          { label: 'Link', value: 'link' },
-        ],
-      },
-      {
-        label: 'Icon',
-        name: 'icon',
-        component: 'toggle',
-      },
-    ],
-  },
-]

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

@@ -1,171 +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 { Icon, ICON_FIELDS } from './icon'
-import { Actions, ACTION_FIELDS } from './actions'
-import { Section, SectionFields } from './section'
-import {
-  Features_Data,
-  Features_Items_Data,
-} from '../.tina/__generated__/types'
-
-export const Feature = (data: Features_Items_Data) => {
-  return (
-    <div
-      className="px-8 py-6 w-full xl:w-auto flex-grow xl:flex-shrink"
-      style={{ flexBasis: '22rem' }}
-    >
-      <div className="max-w-lg">
-        <div className={`mb-6 w-auto inline-block`}>
-          <Icon icon={data?.icon} />
-        </div>
-        <h3 className="mb-4 transition duration-150 ease-out text-2xl font-semibold title-font">
-          {data?.title}
-        </h3>
-        <p className="mb-5 transition duration-150 ease-out text-base opacity-80 leading-relaxed">
-          {data?.text}
-        </p>
-        <Actions actions={data?.actions} />
-      </div>
-    </div>
-  )
-}
-
-export const Features = (props: Features_Data) => {
-  return (
-    <Section variant={props?.style?.color || 'blue'}>
-      <div className="container py-12 lg:py-24 mx-auto">
-        <div className="flex flex-wrap text-left">
-          {props.items?.map((item, i) => {
-            return <Feature key={i} {...item} />
-          })}
-        </div>
-      </div>
-    </Section>
-  )
-}
-
-export const features_template = {
-  label: 'Features',
-  defaultItem: {
-    items: [
-      {
-        _template: 'feature',
-        icon: {
-          color: 'red',
-          name: 'BiTrophy',
-          style: 'circle',
-        },
-        title: 'Longer Information 1',
-        text: "By eleven o'clock the next day we were well upon our way to the old English capital.",
-        actions: [
-          {
-            label: 'Learn More',
-            type: 'link',
-            icon: 'true',
-          },
-        ],
-      },
-      {
-        _template: 'feature',
-        icon: {
-          color: 'primary',
-          name: 'BiPieChartAlt2',
-          style: 'circle',
-        },
-        title: 'Longer Information 2',
-        text: 'Connect to any data source, edit with Tina. Designed for the Jamstack with a focus on React-based sites. ',
-        actions: [
-          {
-            label: 'Learn More',
-            type: 'link',
-            icon: 'true',
-          },
-        ],
-      },
-      {
-        _template: 'feature',
-        icon: {
-          color: 'yellow',
-          name: 'BiMapAlt',
-          style: 'circle',
-        },
-        title: 'Longer Information 3',
-        text: 'Connect to any data source, edit with Tina. Designed for the Jamstack with a focus on React-based sites. ',
-        actions: [
-          {
-            label: 'Learn More',
-            type: 'link',
-            icon: 'true',
-          },
-        ],
-      },
-    ],
-    style: {
-      color: 'default',
-    },
-  },
-  fields: [
-    {
-      label: 'Features',
-      name: 'items',
-      component: 'group-list',
-      defaultItem: {
-        icon: {
-          color: 'primary',
-          name: '',
-          style: 'circle',
-        },
-        title: 'Feature Heading Text',
-        text: 'Connect to any data source, edit with Tina. Designed for the Jamstack with a focus on React-based sites. ',
-        actions: [
-          {
-            label: 'Learn More',
-            type: 'link',
-            icon: 'true',
-          },
-        ],
-        style: {
-          color: 'default',
-        },
-      },
-      itemProps: (item) => ({
-        label: item.title,
-      }),
-      fields: [
-        ...ICON_FIELDS,
-        {
-          name: 'title',
-          label: 'Title',
-          component: 'text',
-        },
-        {
-          name: 'text',
-          label: 'Text',
-          component: 'text',
-        },
-        ...ACTION_FIELDS,
-      ],
-    },
-    {
-      name: 'style',
-      label: 'Style',
-      component: 'group',
-      fields: [...SectionFields],
-    },
-  ],
-}
-
-const FEATURE_BLOCKS = {
-  feature: Feature,
-}

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

@@ -1,247 +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 { Blocks } from './PageBlocks'
-import { FaInstagram, FaFacebookF, FaTwitter, FaGithub } from 'react-icons/fa'
-import { Homepage_Footer_Data, Nav_Data } from '../.tina/__generated__/types'
-
-export const Footer = ({
-  footer,
-  name = '',
-  navList,
-}: {
-  footer: Homepage_Footer_Data
-  name: string
-  navList: Nav_Data[]
-}) => {
-  const theme = React.useContext(ThemeContext)
-
-  return (
-    <footer className="text-white bg-gradient-to-br from-gray-700 to-gray-800 dark:from-gray-900 dark:to-gray-800 body-font">
-      <div className="relative">
-        <div className="relative container mx-auto flex pt-8 lg:pt-3 z-10">
-          <div className="w-full flex flex-col lg:flex-row flex-wrap py-12 px-8">
-            <div className="mb-8 lg:mr-48 flex-grow-0 inline-block">
-              <a className="">
-                <h2 className="text-lg font-bold tracking-tight text-white uppercase transition duration-500 ease-in-out transform hover:text-lightBlack-500">
-                  {name}
-                </h2>
-              </a>
-            </div>
-            <div className="flex-grow flex flex-wrap justify-between -mx-6">
-              {navList?.map((item, i) => {
-                switch (item.__typename) {
-                  case 'Nav_Data':
-                    return <FooterNav key={i} {...item} />
-                }
-              })}
-              {/* <Blocks data={data.navlist} blocks={FOOTER_BLOCKS} /> */}
-            </div>
-          </div>
-        </div>
-        <div
-          className={`overflow-hidden absolute top-0 left-0 w-full h-full flex flex-row justify-center`}
-        >
-          <span
-            className={`absolute opacity-30 w-2/3 h-64 bg-${theme.color}-500 -bottom-48 rounded-t-full`}
-            style={{ filter: 'blur(10rem)' }}
-          ></span>
-        </div>
-        <div
-          className={`relative w-full opacity-90 z-10 bg-gradient-to-r from-gray-800 via-${theme.color}-400 to-gray-800`}
-          style={{ height: '3px' }}
-        ></div>
-        <div className="bg-gray-800 dark:bg-gray-900 z-0 relative">
-          <div className="container flex flex-col flex-wrap p-7 mx-auto sm:flex-row justify-center">
-            <div className="flex justify-center">
-              {footer?.social?.facebook && (
-                <a
-                  href={footer.social.facebook}
-                  target="_blank"
-                  className="mx-2"
-                >
-                  <FaFacebookF
-                    className={`h-6 w-auto text-white hover:text-${theme.color}-500`}
-                  />
-                </a>
-              )}
-              {footer?.social?.twitter && (
-                <a
-                  href={footer.social.twitter}
-                  target="_blank"
-                  className="mx-2"
-                >
-                  <FaTwitter
-                    className={`h-6 w-auto text-white hover:text-${theme.color}-500`}
-                  />
-                </a>
-              )}
-              {footer?.social?.instagram && (
-                <a
-                  href={footer.social.instagram}
-                  target="_blank"
-                  className="mx-2"
-                >
-                  <FaInstagram
-                    className={`h-6 w-auto text-white hover:text-${theme.color}-500`}
-                  />
-                </a>
-              )}
-              {footer?.social?.github && (
-                <a href={footer.social.github} target="_blank" className="mx-2">
-                  <FaGithub
-                    className={`h-6 w-auto text-white hover:text-${theme.color}-500`}
-                  />
-                </a>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export const FooterNav = (data: Nav_Data) => {
-  const theme = React.useContext(ThemeContext)
-
-  return (
-    <div className="flex-grow px-6">
-      <h3
-        className={`mb-3 text-sm font-semibold tracking-widest text-${theme.color}-400 uppercase title-font`}
-        style={{
-          textShadow: `0 1px 3px rgba(var(--color-rgb-${theme.color}-600),0.3)`,
-        }}
-      >
-        {data.title}
-      </h3>
-      <nav className="pb-8 list-none">
-        {data.items &&
-          data.items.map(function (item, index) {
-            return (
-              <li key={index}>
-                <a
-                  href={item?.link || ''}
-                  className="text-sm text-gray-200 hover:text-white"
-                >
-                  {item?.label || ''}
-                </a>
-              </li>
-            )
-          })}
-      </nav>
-    </div>
-  )
-}
-
-export const footer_nav_template = {
-  label: 'Footer Nav',
-  defaultItem: {
-    title: 'Product',
-    items: [
-      {
-        label: 'Form Templates',
-        link: '#',
-      },
-      {
-        label: 'Landing Page',
-        link: '#',
-      },
-      {
-        label: 'Figma Files',
-        link: '#',
-      },
-      {
-        label: 'Background Info',
-        link: '#',
-      },
-    ],
-  },
-  itemProps: (item) => ({
-    label: item.title,
-  }),
-  fields: [
-    {
-      name: 'title',
-      label: 'Title',
-      component: 'text',
-    },
-    {
-      name: 'items',
-      label: 'Nav Items',
-      component: 'group-list',
-      itemProps: (item) => ({
-        label: item.label,
-      }),
-      fields: [
-        {
-          name: 'label',
-          label: 'Label',
-          component: 'text',
-        },
-        {
-          name: 'link',
-          label: 'Link',
-          component: 'text',
-        },
-      ],
-    },
-  ],
-}
-
-const FOOTER_BLOCKS = {
-  nav: FooterNav,
-}
-
-export const FOOTER_FIELDS = [
-  {
-    label: 'Nav List',
-    name: 'navlist',
-    component: 'blocks',
-    itemProps: (item) => ({
-      label: item.title,
-    }),
-    templates: {
-      nav: footer_nav_template,
-    },
-  },
-  {
-    name: 'social',
-    label: 'Social Media',
-    component: 'group',
-    fields: [
-      {
-        name: 'facebook',
-        label: 'Facebook',
-        component: 'text',
-      },
-      {
-        name: 'twitter',
-        label: 'Twitter',
-        component: 'text',
-      },
-      {
-        name: 'instagram',
-        label: 'Instagram',
-        component: 'text',
-      },
-      {
-        name: 'github',
-        label: 'Github',
-        component: 'text',
-      },
-    ],
-  },
-]

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

@@ -1,156 +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 { ACTION_FIELDS, Actions } from './actions'
-import { Section, SectionFields } from './section'
-
-export const Hero = (data) => {
-  const theme = React.useContext(ThemeContext)
-
-  return (
-    <Section variant={data?.style?.color || 'blue'}>
-      <div className="w-full pt-20 lg:py-56 lg:text-left">
-        <div className="px-8 pb-20 lg:pb-0 lg:w-1/2 lg:px-12">
-          <div className="max-w-3xl mx-auto">
-            <h2 className="w-full	mb-5 text-md font-bold tracking-wide title-font">
-              {data.tagline}
-            </h2>
-            <h3
-              className={`w-full relative	mb-6 text-5xl font-extrabold tracking-normal text-left title-font`}
-            >
-              {data.style?.color === 'primary' ? (
-                <span
-                  className={`bg-clip-text text-transparent bg-gradient-to-r from-gray-600 to-gray-800`}
-                  style={{
-                    textShadow: `0 0.5rem 3rem rgba(var(--color-rgb-${theme.color}-600),0.35)`,
-                    boxDecorationBreak: 'clone',
-                    WebkitBoxDecorationBreak: 'clone',
-                  }}
-                >
-                  {data.headline}
-                </span>
-              ) : (
-                <span
-                  className={`bg-clip-text text-transparent bg-gradient-to-r from-${theme.color}-400 to-${theme.color}-600`}
-                  style={{
-                    textShadow: `0 0.5rem 3rem rgba(var(--color-rgb-${theme.color}-600),0.35)`,
-                    boxDecorationBreak: 'clone',
-                    WebkitBoxDecorationBreak: 'clone',
-                  }}
-                >
-                  {data.headline}
-                </span>
-              )}
-            </h3>
-            <p className="w-full max-w-xl mb-8 opacity-80 transition duration-150 ease-out text-left text-lg leading-relaxed lg:text-xl lg:leading-relaxed">
-              {data.paragraph}
-            </p>
-            <Actions actions={data.actions} />
-          </div>
-        </div>
-        <div className="relative w-full h-auto lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:h-full">
-          {data?.image && (
-            <img
-              className="lg:absolute lg:inset-0 w-full h-auto max-h-96 md:max-h-128 lg:max-h-full lg:h-full object-cover"
-              alt={data.image.alt}
-              src={data.image.src}
-            />
-          )}
-        </div>
-      </div>
-    </Section>
-  )
-}
-
-export const IMAGE_FIELDS = [
-  {
-    name: 'src',
-    label: 'Image Source',
-    component: 'text',
-  },
-  {
-    name: 'alt',
-    label: 'Alt Text',
-    component: 'text',
-  },
-]
-
-export const hero_template = {
-  label: 'Hero',
-  defaultItem: {
-    tagline: 'TAGLINE ABOVE TEXT',
-    headline: 'This is a large display heading.',
-    text: 'Give your team a contextual, intuitive editing experience without sacrificing code quality.',
-    image: {
-      src: '/canal.jpg',
-      alt: 'Photo from Unsplash',
-    },
-    actions: [
-      {
-        label: 'Primary Action',
-        type: 'button',
-        icon: 'true',
-      },
-      {
-        label: 'Learn More',
-        type: 'link',
-      },
-    ],
-    style: {
-      color: 'tint',
-    },
-  },
-  fields: [
-    {
-      name: '',
-      label: 'Text',
-      component: 'group',
-      fields: [...SectionFields],
-    },
-    {
-      name: 'image',
-      label: 'Image',
-      component: 'group',
-      fields: IMAGE_FIELDS,
-    },
-    ...ACTION_FIELDS,
-    {
-      name: 'style',
-      label: 'Style',
-      component: 'group',
-      fields: [
-        {
-          name: 'color',
-          label: 'Color',
-          component: 'select',
-          options: [
-            {
-              label: 'Default',
-              value: 'default',
-            },
-            {
-              label: 'Tint',
-              value: 'tint',
-            },
-            {
-              label: 'Primary',
-              value: 'primary',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}