From e760cdf29dd4e89fb915d28f8b7e8445d72ef55c Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Fri, 24 Jun 2022 21:26:39 +0900 Subject: [PATCH] update layout approach to have a unified look --- components/FormList.tsx | 6 +- components/builder/Builder.tsx | 72 ++-- components/builder/PageToolbar.tsx | 12 +- components/builder/UsageIntro.tsx | 36 -- components/form/FormCode.tsx | 277 +++++++-------- components/layout/AnalyticsCard.tsx | 45 --- components/layout/BaseLayoutAuthorized.tsx | 73 ++++ components/layout/FullWidth.tsx | 9 + components/layout/LayoutBasic.tsx | 136 ------- components/layout/LayoutFormBasic.tsx | 48 --- components/layout/LayoutFormBuilder.tsx | 51 --- components/layout/LayoutFormResults.tsx | 80 ----- components/layout/LimitedWidth.tsx | 9 + components/layout/MenuBreadcrumbs.tsx | 40 +-- components/layout/MenuProfile.tsx | 16 +- components/layout/MenuSteps.tsx | 65 ++-- components/layout/NewFormNavButton.tsx | 28 ++ components/layout/SecondNavBar.tsx | 41 ++- components/layout/SecondNavBarItem.tsx | 58 --- components/results/AnalyticsCard.tsx | 75 ++++ components/results/ResultsAnalytics.tsx | 102 +++--- components/results/ResultsResponses.tsx | 2 +- components/results/ResultsSummary.tsx | 51 ++- lib/navigation/formCodeSecondNavigation.ts | 47 +++ lib/navigation/formMenuSteps.ts | 17 + lib/navigation/formResultsSecondNavigation.ts | 36 ++ pages/forms/[id]/form.tsx | 45 --- pages/forms/[id]/form/index.tsx | 67 ++++ pages/forms/[id]/form/react.tsx | 134 +++++++ pages/forms/[id]/index.tsx | 2 +- pages/forms/[id]/pipelines.tsx | 178 +++++----- pages/forms/[id]/react.tsx | 151 -------- pages/forms/[id]/results.tsx | 45 --- pages/forms/[id]/results/analytics.tsx | 50 +++ pages/forms/[id]/results/responses.tsx | 50 +++ pages/forms/[id]/results/summary.tsx | 50 +++ pages/forms/index.tsx | 24 +- styles/globals.css | 8 + tailwind.config.js | 334 +++++++++--------- 39 files changed, 1258 insertions(+), 1312 deletions(-) delete mode 100644 components/builder/UsageIntro.tsx delete mode 100644 components/layout/AnalyticsCard.tsx create mode 100644 components/layout/BaseLayoutAuthorized.tsx create mode 100644 components/layout/FullWidth.tsx delete mode 100644 components/layout/LayoutBasic.tsx delete mode 100644 components/layout/LayoutFormBasic.tsx delete mode 100644 components/layout/LayoutFormBuilder.tsx delete mode 100644 components/layout/LayoutFormResults.tsx create mode 100644 components/layout/LimitedWidth.tsx create mode 100644 components/layout/NewFormNavButton.tsx delete mode 100644 components/layout/SecondNavBarItem.tsx create mode 100644 components/results/AnalyticsCard.tsx create mode 100644 lib/navigation/formCodeSecondNavigation.ts create mode 100644 lib/navigation/formMenuSteps.ts create mode 100644 lib/navigation/formResultsSecondNavigation.ts delete mode 100644 pages/forms/[id]/form.tsx create mode 100644 pages/forms/[id]/form/index.tsx create mode 100644 pages/forms/[id]/form/react.tsx delete mode 100644 pages/forms/[id]/react.tsx delete mode 100644 pages/forms/[id]/results.tsx create mode 100644 pages/forms/[id]/results/analytics.tsx create mode 100644 pages/forms/[id]/results/responses.tsx create mode 100644 pages/forms/[id]/results/summary.tsx diff --git a/components/FormList.tsx b/components/FormList.tsx index 8556c89edf..8ef0d04963 100644 --- a/components/FormList.tsx +++ b/components/FormList.tsx @@ -37,7 +37,7 @@ export default function FormList() { return ( <> -
+
{forms && (forms.length === 0 ? (
@@ -53,7 +53,7 @@ export default function FormList() {
) : ( -
    +
      diff --git a/components/builder/UsageIntro.tsx b/components/builder/UsageIntro.tsx deleted file mode 100644 index 9492ef9134..0000000000 --- a/components/builder/UsageIntro.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* This example requires Tailwind CSS v2.0+ */ -import { InformationCircleIcon } from "@heroicons/react/solid"; -import { useState } from "react"; - -export default function UsageIntro() { - const [dismissed, setDismissed] = useState(false); - return ( - !dismissed && ( -
      -
      -
      -
      -
      -

      - Welcome to the snoopForms No-Code Editor. Use 'tab' to - add new blocks or change their options. You can also drag 'n - drop blocks to reorder them. -

      -

      - setDismissed(true)} - className="font-medium text-gray-700 whitespace-nowrap hover:text-gray-600" - > - Dismiss - -

      -
      -
      -
      - ) - ); -} diff --git a/components/form/FormCode.tsx b/components/form/FormCode.tsx index b2d7259bd6..05135bff34 100644 --- a/components/form/FormCode.tsx +++ b/components/form/FormCode.tsx @@ -1,17 +1,16 @@ +import { DocumentSearchIcon } from "@heroicons/react/outline"; +import Link from "next/link"; import { FaReact, FaVuejs } from "react-icons/fa"; -import { DocumentSearchIcon, TerminalIcon } from "@heroicons/react/outline"; +import { toast } from "react-toastify"; import { classNames } from "../../lib/utils"; import StandardButton from "../StandardButton"; -import Link from "next/link"; -import SecondNavBar from "../layout/SecondNavBar"; -import SecondNavBarItem from "../layout/SecondNavBarItem"; export default function FormCode({ formId }) { const libs = [ { id: "react", name: "React", - href: `forms/${formId}/react`, + href: `/forms/${formId}/form/react`, bgColor: "bg-blue", version: "v0.1", icon: FaReact, @@ -38,169 +37,153 @@ export default function FormCode({ formId }) { href: "https://docs.snoopforms.com", bgColor: "bg-ui-gray-dark", icon: DocumentSearchIcon, + target: "_blank", }, ]; return ( <> - - - - formID - - - - React - - - - React Native - - - - Vue - - - - Docs - - -
      -
      -
      -

      - Connect your form -

      +
      +

      + Connect your form +

      +
      +
      +

      + To send all form submissions to this dashboard, update the form ID in + the {""} component. +

      +
      +
      +
      + +
      + + + { + navigator.clipboard.writeText(formId); + toast("Copied form ID to clipboard"); + }} + fullwidth + > + copy +
      -
      -
      +
      +

      + + {"<"} + SnoopForm + {""} + +

      +

      + {`domain="${window?.location.host}"`} +

      +

      + {`protocol="${window?.location.protocol.replace( + ":", + "" + )}"`} +

      +

      + {`formId=${formId}`} +

      +

      + {">"} +

      +

      + + {`{...}`} + +

      + + {"SnoopForm + {">"} + +
      +
      +
      +

      Code your form

      - To send all form submissions to this dashboard, update the form ID - in the {""} component. + Build your form with the code library of your choice. Manage your + data in this dashboard.

      - - + + + ))} +
    -
    -

    - Your form is running? Go to{" "} - - Pipelines - -

    -
    +
    +

    + Your form is running? Go to{" "} + + Pipelines + +

diff --git a/components/layout/AnalyticsCard.tsx b/components/layout/AnalyticsCard.tsx deleted file mode 100644 index a3055e0df5..0000000000 --- a/components/layout/AnalyticsCard.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; -import { QuestionMarkCircleIcon } from "@heroicons/react/outline"; -import { classNames } from "../../lib/utils"; - -interface Props { - KPI: string | number; - typeText?: boolean; - label: string; - toolTipText: string; - trend: number; -} - -const AnalyticsCard: React.FC = ({ - KPI, - typeText = false, - label, - toolTipText, - trend, -}) => { - return ( -
-
- {label}{" "} - {toolTipText && ( - - )} -
-
- {KPI} - {trend && ( -
- {trend} % -
- )} -
-
- ); -}; - -export default AnalyticsCard; diff --git a/components/layout/BaseLayoutAuthorized.tsx b/components/layout/BaseLayoutAuthorized.tsx new file mode 100644 index 0000000000..96c06c2b4d --- /dev/null +++ b/components/layout/BaseLayoutAuthorized.tsx @@ -0,0 +1,73 @@ +import { signIn, useSession } from "next-auth/react"; +import Head from "next/head"; +import { classNames } from "../../lib/utils"; +import Loading from "../Loading"; +import MenuBreadcrumbs from "./MenuBreadcrumbs"; +import MenuProfile from "./MenuProfile"; +import MenuSteps from "./MenuSteps"; +import NewFormNavButton from "./NewFormNavButton"; + +interface BaseLayoutAuthorizedProps { + title: string; + breadcrumbs: any; + steps?: any; + currentStep?: string; + children: React.ReactNode; + limitHeightScreen?: boolean; +} + +export default function BaseLayoutAuthorized({ + title, + breadcrumbs, + steps, + currentStep, + children, + limitHeightScreen = false, +}: BaseLayoutAuthorizedProps) { + const { data: session, status } = useSession(); + + if (status === "loading") { + return ; + } + + if (!session) { + signIn(); + return
You need to be authenticated to view this page.
; + } + + return ( + <> + + {title} + +
+
+
+
+
+
+ + +
+
+ {steps && ( + + )} +
+
+ +
+
+
+
+ {children} +
+
+ + ); +} diff --git a/components/layout/FullWidth.tsx b/components/layout/FullWidth.tsx new file mode 100644 index 0000000000..ad832e0b88 --- /dev/null +++ b/components/layout/FullWidth.tsx @@ -0,0 +1,9 @@ +interface Props { + children?: React.ReactNode; +} + +const FullWidth: React.FC = ({ children }) => { + return
{children}
; +}; + +export default FullWidth; diff --git a/components/layout/LayoutBasic.tsx b/components/layout/LayoutBasic.tsx deleted file mode 100644 index f59eb184a5..0000000000 --- a/components/layout/LayoutBasic.tsx +++ /dev/null @@ -1,136 +0,0 @@ -/* This example requires Tailwind CSS v2.0+ */ -import { Fragment } from "react"; -import Image from "next/image"; -import { Disclosure, Menu, Transition } from "@headlessui/react"; -import { MenuIcon, XIcon } from "@heroicons/react/outline"; -import { signIn, signOut, useSession } from "next-auth/react"; -import Loading from "../Loading"; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} - -export default function Layout({ children }) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( -
- - {({ open }) => ( - <> -
-
-
-
- snoopForms logo -
-
-
- {/* Profile dropdown */} - - {({ open }) => ( - <> -
- - Open user menu - profile - -
- - - - {({ active }) => ( - - )} - - - - - )} - -
-
- {/* Mobile menu button */} - - Open main menu - {open ? ( - -
-
-
- - -
-
-
- user avatar -
-
-
- -
-
- - - )} - - -
{children}
-
- ); -} diff --git a/components/layout/LayoutFormBasic.tsx b/components/layout/LayoutFormBasic.tsx deleted file mode 100644 index 4dba7accae..0000000000 --- a/components/layout/LayoutFormBasic.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Head from "next/head"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuSteps from "./MenuSteps"; -import MenuProfile from "./MenuProfile"; -import { signIn, useSession } from "next-auth/react"; -import Loading from "../Loading"; - -export default function LayoutShare({ title, formId, currentStep, children }) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
- - {/* Main content */} -
-
{children}
-
-
-
- - ); -} diff --git a/components/layout/LayoutFormBuilder.tsx b/components/layout/LayoutFormBuilder.tsx deleted file mode 100644 index a2390cbf2d..0000000000 --- a/components/layout/LayoutFormBuilder.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { signIn, useSession } from "next-auth/react"; -import Head from "next/head"; -import Loading from "../Loading"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuProfile from "./MenuProfile"; -import MenuSteps from "./MenuSteps"; - -export default function LayoutFormResults({ - title, - formId, - currentStep, - children, -}) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
- - {/* Main content */} - {children} -
-
- - ); -} diff --git a/components/layout/LayoutFormResults.tsx b/components/layout/LayoutFormResults.tsx deleted file mode 100644 index 42ffb16343..0000000000 --- a/components/layout/LayoutFormResults.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { signIn, useSession } from "next-auth/react"; -import Head from "next/head"; -import { classNames } from "../../lib/utils"; -import Loading from "../Loading"; -import MenuBreadcrumbs from "./MenuBreadcrumbs"; -import MenuProfile from "./MenuProfile"; -import MenuSteps from "./MenuSteps"; - -export default function LayoutFormResults({ - title, - formId, - resultMode, - setResultMode, - currentStep, - children, -}) { - const { data: session, status } = useSession(); - - if (status === "loading") { - return ; - } - - if (!session) { - signIn(); - return
You need to be authenticated to view this page.
; - } - - const resultModes = [ - { name: "Summary", id: "summary", icon: "" }, - { name: "Responses", id: "responses", icon: "" }, - { name: "Analytics", id: "analytics", icon: "" }, - ]; - return ( - <> - - {title} - -
-
-
-
-
- - -
- {/* Profile dropdown */} - -
-
-
-
-
- -
-
-
- - {/* Main content */} - {children} -
-
- - ); -} diff --git a/components/layout/LimitedWidth.tsx b/components/layout/LimitedWidth.tsx new file mode 100644 index 0000000000..5463678744 --- /dev/null +++ b/components/layout/LimitedWidth.tsx @@ -0,0 +1,9 @@ +interface Props { + children?: React.ReactNode; +} + +const LimitedWidth: React.FC = ({ children }) => { + return
{children}
; +}; + +export default LimitedWidth; diff --git a/components/layout/MenuBreadcrumbs.tsx b/components/layout/MenuBreadcrumbs.tsx index 682ed89579..3e549493b6 100644 --- a/components/layout/MenuBreadcrumbs.tsx +++ b/components/layout/MenuBreadcrumbs.tsx @@ -1,38 +1,11 @@ -import { HomeIcon, PlusIcon } from "@heroicons/react/outline"; +import { HomeIcon } from "@heroicons/react/outline"; import Link from "next/link"; -import { useForm } from "../../lib/forms"; -import Router from "next/router"; -import StandardButton from "../StandardButton"; -import { createForm } from "../../lib/forms"; - -export default function MenuBreadcrumbs({ formId }) { - const newForm = async () => { - const form = await createForm(); - await Router.push(`/forms/${form.id}/welcome`); - }; - - const { form, isLoadingForm } = useForm(formId); - - const pages = [ - { name: "Forms", href: "/forms", current: false }, - { name: form.name, href: "#", current: true }, - ]; - - if (isLoadingForm) { - return
; - } +export default function MenuBreadcrumbs({ breadcrumbs }) { return (