create-tina-app 0.1.2 → 0.1.5

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',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-}

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]]
-}