create-tina-app 0.0.1 → 0.1.0

package/examples/tina-tailwind-sidebar-demo/graphql.config.js

@@ -0,0 +1,24 @@
+/**
+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.
+*/
+
+module.exports = {
+  projects: {
+    app: {
+      schema: ['.tina/__generated__/schema.gql'],
+      documents: [
+        'pages/**/*.{graphql,js,ts,jsx,tsx}',
+        'pages/*.{graphql,js,ts,jsx,tsx}',
+      ],
+    },
+  },
+}

package/examples/tina-tailwind-sidebar-demo/next-env.d.ts

@@ -0,0 +1,15 @@
+/**
+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.
+*/
+
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package/examples/tina-tailwind-sidebar-demo/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "tina-tailwind-sidebar-demo",
+  "version": "0.1.11",
+  "private": true,
+  "description": "",
+  "keywords": [
+    "tailwindcss",
+    "react",
+    "cms",
+    "tina",
+    "tinacms",
+    "nextjs"
+  ],
+  "license": "Apache-2.0",
+  "main": "src/index.js",
+  "dependencies": {
+    "autoprefixer": "^10.2.5",
+    "chroma-js": "^2.1.1",
+    "next": "10.0.5",
+    "postcss": "^8.2.9",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-icons": "^4.2.0",
+    "react-is": "^17.0.2",
+    "react-tinacms-editor": "^0.52.5",
+    "react-tinacms-inline": "^0.53.5",
+    "styled-components": "^5.3.0",
+    "tinacms": "latest"
+  },
+  "devDependencies": {
+    "@tinacms/cli": "latest",
+    "@types/node": "^15.12.2",
+    "@types/react": "^17.0.11",
+    "tailwindcss": "^2.0.4",
+    "typescript": "^3.8.3"
+  },
+  "scripts": {
+    "dev": "yarn tinacms server:start -c \"next dev\"",
+    "build": "yarn tinacms server:start -c \"next build\"",
+    "start": "yarn tinacms server:start -c \"next start\""
+  }
+}

package/examples/tina-tailwind-sidebar-demo/pages/_app.js

@@ -0,0 +1,48 @@
+import '../styles.css'
+import dynamic from 'next/dynamic'
+import { TinaEditProvider } from 'tinacms/dist/edit-state'
+const TinaCMS = dynamic(() => import('tinacms'), { ssr: false })
+
+const NEXT_PUBLIC_TINA_CLIENT_ID = process.env.NEXT_PUBLIC_TINA_CLIENT_ID
+const NEXT_PUBLIC_USE_LOCAL_CLIENT =
+  process.env.NEXT_PUBLIC_USE_LOCAL_CLIENT || true
+
+const App = ({ Component, pageProps }) => {
+  return (
+    <>
+      <TinaEditProvider
+        showEditButton={true}
+        editMode={
+          <TinaCMS
+            branch="main"
+            clientId={NEXT_PUBLIC_TINA_CLIENT_ID}
+            isLocalClient={Boolean(Number(NEXT_PUBLIC_USE_LOCAL_CLIENT))}
+            // mediaStore={import('next-tinacms-cloudinary').then(
+            //   ({ TinaCloudCloudinaryMediaStore }) =>
+            //     TinaCloudCloudinaryMediaStore
+            // )}
+            // cmsCallback={(cms) => {
+            //   import('react-tinacms-editor').then(({ MarkdownFieldPlugin }) => {
+            //     cms.plugins.add(MarkdownFieldPlugin)
+            //   })
+            // }}
+            // formifyCallback={({ formConfig, createForm, createGlobalForm }) => {
+            //   if (formConfig.id === 'getGlobalDocument') {
+            //     return createGlobalForm(formConfig)
+            //   }
+
+            //   return createForm(formConfig)
+            // }}
+            {...pageProps}
+          >
+            {(livePageProps) => <Component {...livePageProps} />}
+          </TinaCMS>
+        }
+      >
+        <Component {...pageProps} />
+      </TinaEditProvider>
+    </>
+  )
+}
+
+export default App

package/examples/tina-tailwind-sidebar-demo/pages/admin.tsx

@@ -0,0 +1,26 @@
+/**
+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 { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { useEditState } from '../utils/editState'
+const Admin = () => {
+  const { setEdit } = useEditState()
+  const router = useRouter()
+  useEffect(() => {
+    setEdit(true)
+    router.back()
+  }, [])
+  return <div>Going into edit mode...</div>
+}
+export default Admin

package/examples/tina-tailwind-sidebar-demo/pages/index.tsx

@@ -0,0 +1,186 @@
+/**
+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 { Hero, hero_template } from '../components/hero'
+import { Testimonial, testimonial_template } from '../components/testimonial'
+import { Blocks } from '../components/PageBlocks'
+import { Nav } from '../components/nav'
+import { Footer } from '../components/footer'
+import { Features, features_template } from '../components/features'
+import { Page, ThemeDocument } from '../.tina/__generated__/types'
+import { Theme } from '../components/theme'
+import { gql, getStaticPropsForTina } from 'tinacms'
+
+interface AppProps {
+  data: {
+    getPageDocument: { data: Page }
+    getThemeDocument: ThemeDocument
+  }
+}
+const App = ({ data }: AppProps) => {
+  const { getPageDocument } = data
+  const { blocks, nav, footer, navlist } = getPageDocument.data
+  return (
+    <div className="App">
+      <Theme theme={data}>
+        <div className="min-h-screen flex flex-col">
+          <Nav nav={nav} />
+          <div className="flex-grow flex flex-col">
+            <Blocks
+              blocksData={blocks}
+              placeholder={
+                <div className="flex-grow flex items-center justify-center 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">
+                  <p className="opacity-30">
+                    There's nothing here, try adding some page sections.
+                  </p>
+                </div>
+              }
+            />
+          </div>
+          <Footer
+            name={nav?.wordmark?.name || ''}
+            footer={footer}
+            navList={navlist}
+          />
+        </div>
+      </Theme>
+      {/* {showModal && (
+        <TinaModal
+        data={data}
+        close={() => {
+          setShowModal(false);
+        }}
+      /> */}
+      {/* )} */}
+    </div>
+  )
+}
+
+const PAGE_BLOCKS = {
+  hero: Hero,
+  testimonial: Testimonial,
+  features: Features,
+}
+
+const PAGE_BLOCK_TEMPLATES = {
+  hero: hero_template,
+  testimonial: testimonial_template,
+  features: features_template,
+}
+
+export default App
+
+export const query = gql`
+  query ContentQuery {
+    getThemeDocument(relativePath: "NormalTheme.json") {
+      data {
+        color
+        btnStyle
+      }
+    }
+    getPageDocument(relativePath: "homepage.json") {
+      id
+      data {
+        nav {
+          wordmark {
+            icon {
+              color
+              name
+              style
+            }
+            name
+          }
+          items {
+            label
+            link
+          }
+        }
+        blocks {
+          __typename
+          ... on PageBlocksHero {
+            tagline
+            headline
+            paragraph
+            string {
+              color
+            }
+            image {
+              src
+              alt
+            }
+            actions {
+              label
+              type
+              icon
+            }
+            style {
+              color
+            }
+          }
+          __typename
+          ... on PageBlocksTestimonial {
+            quote
+            author
+            style {
+              color
+            }
+          }
+          __typename
+          ... on PageBlocksFeatures {
+            items {
+              icon {
+                color
+                name
+                style
+              }
+              title
+              text
+              actions {
+                label
+                type
+                icon
+              }
+            }
+          }
+        }
+        navlist {
+          __typename
+          ... on PageNavlistNav {
+            title
+            items {
+              label
+              link
+            }
+          }
+        }
+        footer {
+          social {
+            facebook
+            twitter
+            instagram
+            github
+          }
+        }
+      }
+    }
+  }
+`
+
+export const getStaticProps = async (ctx) => {
+  const tinaProps = await getStaticPropsForTina({ query, variables: {} })
+  return {
+    props: {
+      ...tinaProps,
+    },
+  }
+}

package/examples/tina-tailwind-sidebar-demo/postcss.config.js

@@ -0,0 +1,19 @@
+/**
+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.
+*/
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/examples/tina-tailwind-sidebar-demo/public/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Tina Demo</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/examples/tina-tailwind-sidebar-demo/styles.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+div[class^='ModalBody'],
+div[class*=' ModalBody'] {
+  min-height: 42vh;
+}
+
+button[class^='SidebarToggleButton']:focus,
+button[class*=' SidebarToggleButton']:focus,
+button[class^='SidebarToggleButton'],
+button[class*=' SidebarToggleButton'] {
+  outline: 0 !important;
+  outline-color: transparent;
+}

package/examples/tina-tailwind-sidebar-demo/tailwind.config.js

@@ -0,0 +1,83 @@
+/**
+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.
+*/
+
+const chroma = require('chroma-js')
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  purge: [],
+  darkMode: 'class',
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      black: colors.black,
+      white: colors.white,
+      gray: colors.coolGray,
+      blue: colors.blue,
+      teal: colors.cyan,
+      green: colors.emerald,
+      red: colors.rose,
+      purple: colors.purple,
+      pink: colors.pink,
+      yellow: colors.yellow,
+      orange: colors.orange,
+    },
+    screens: {
+      sm: '600px',
+      md: '900px',
+      lg: '1200px',
+      xl: '1500px',
+      '2xl': '1800px',
+    },
+    extend: {
+      spacing: {
+        128: '32rem',
+      },
+      zIndex: {
+        '-1': '-1',
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    /* https://gist.github.com/Merott/d2a19b32db07565e94f10d13d11a8574 */
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          if (value === 'transparent' || value === 'currentColor') return
+
+          const newVars =
+            typeof value === 'string'
+              ? {
+                  [`--color${colorGroup}-${colorKey}`]: value,
+                  [`--color-rgb${colorGroup}-${colorKey}`]: chroma(value)
+                    .rgb()
+                    .toString(),
+                }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors')),
+      })
+    },
+  ],
+}

package/examples/tina-tailwind-sidebar-demo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/features.ts"],
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "create-tina-app",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "files": [
     "dist",
+    "examples",
     "bin/*"
   ],
-  "bin": "./dist/index.js",
+  "bin": "bin/create-tina-app",
   "typings": "dist/index.d.ts",
   "license": "Apache-2.0",
   "buildConfig": {
@@ -19,7 +20,8 @@
   },
   "scripts": {
     "types": "yarn tsc",
-    "build": "echo \"Run `yarn build` from the root of the repository instead\""
+    "build": "echo \"Run `yarn build` from the root of the repository instead\"",
+    "test-run-bin": "yarn create-tina-app"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -29,6 +31,7 @@
     "directory": "packages/create-tina-app"
   },
   "devDependencies": {
+    "@types/fs-extra": "^9.0.13",
     "@types/node": "^16.11.7",
     "@types/prompts": "^2.0.14",
     "@types/tar": "4.0.3",
@@ -39,6 +42,7 @@
     "commander": "^8.3.0",
     "cross-spawn": "^7.0.3",
     "esm": "3.2.25",
+    "fs-extra": "^10.0.0",
     "got": "^11.8.2",
     "prompts": "^2.4.2",
     "rimraf": "^3.0.2",