smokey:@aaron/dev > upstream

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["@emotion"]
+}

.env.example

@@ -0,0 +1,40 @@
+NEXT_PUBLIC_IS_MAINT_MODE=
+NEXT_PUBLIC_SHORT_TITLE=
+NEXT_PUBLIC_ENTITY_NAME=
+NEXT_PUBLIC_SITE_TITLE=
+NEXT_PUBLIC_SITE_URL=
+NEXT_PUBLIC_SITE_SUBTITLE=
+NEXT_PUBLIC_PAGE_TITLE=
+NEXT_PUBLIC_PAGE_DESC=
+NEXT_PUBLIC_LOGO_PATH=
+NEXT_PUBLIC_COMPANY_EMAIL=
+NEXT_PUBLIC_COMPANY_PHONE=
+NEXT_PUBLIC_COMPANY_LEGAL_URL=
+NEXT_PUBLIC_COMING_SOON_COPY=
+NEXT_PUBLIC_VIDEO_URL=
+NEXT_PUBLIC_APP_URL=
+NEXT_PUBLIC_SPREE_API_URL=
+NEXT_PUBLIC_SPREE_ACCESS_TOKEN=
+NEXT_PUBLIC_MUX_ACCESS_TOKEN_ID=
+NEXT_PUBLIC_MUX_SECRET_KEY=
+NEXT_PUBLIC_SC_CLIENT_ID=
+NEXT_PUBLIC_SC_CLIENT_SECRET=
+NEXT_PUBLIC_TRACKING=
+NEXT_PUBLIC_TRACKING_VERBOSE=
+NEXT_PUBLIC_TRACKING_GA_ON=
+NEXT_PUBLIC_TRACKING_PROVIDER_GA=
+NEXT_PUBLIC_GA_TRACKING_CODE=
+NEXT_PUBLIC_GA_DEBUG_MODE=
+NEXT_PUBLIC_TRACKING_KM_ON=
+NEXT_PUBLIC_TRACKING_PROVIDER_KM=
+NEXT_PUBLIC_TRACKING_VERBOSE=
+NEXT_PUBLIC_MAILCHIMP_URL=
+NEXT_PUBLIC_MAILCHIMP_CLIENT_KEY=
+NEXT_PUBLIC_MAILCHIMP_API_KEY=
+NEXT_PUBLIC_MAILCHIMP_USERNAME=
+NEXT_PUBLIC_MAILCHIMP_U=
+NEXT_PUBLIC_MAILCHIMP_ID=
+NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID=
+NEXT_PUBLIC_INSTAGRAM_URL=
+NEXT_PUBLIC_FACEBOOK_URL=
+NEXT_PUBLIC_TWITTER_URL=

.gitignore

@@ -26,7 +26,21 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
+.env.dev
+.env.development
 .env.development.local
+.env.staging
+.env.staging.local
+.env.test
 .env.test.local
+.env.prod
+.env.production
 .env.production.local
+envvars.txt
+
+.env.DNA.development
+.env.DNA.production
+.env.DNA.staging
+.env.DNA.test

README.md

@@ -2,19 +2,14 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+### Running Locally:
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+- `cp .env.example .env.development`
+- Replace `.env.development` with variables from Aaron
+- `yarn dev`
+- Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-## Learn More
+## NextJS
 
 To learn more about Next.js, take a look at the following resources:
 
@@ -23,38 +18,95 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+## Styles
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Always use `@emotion/styled` wherever possible. If regular CSS is required, use one of the following style files.
+We manage our global styles in several files:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- `./styles/global-styles.tsx` (global stylesheet)
+- `./styles/fonts.css` (global @font-face rules)
+- `./styles/all.css` (global styles injected in at app root)
+- `./styles/theme.tsx` (global theme variables)
+- `./emotion.d.ts` (theme typings)
 
 ## Gotchas:
 
-- App only loads using http://0.0.0.0:3000, using "localhost" does not work right now
+- The app has a "Maintenance Mode" (branded fullscreen takeover), simply set `IS_MAINT_MODE=true`, and the `<Header/>` will disappear and `<Home/>` gets taken over by `<ComingSoon/>`. It's fun, try it!
+- All the data for the app comes in from our staging server on Heroku, but you can also run the dna-admin CMS+API locally (hint: login only works with a localhost API)
+- To run against the local API, set the `SPREE_API_URL` environment
+  variable to the local API host/port
+- Complains about missing `.next/build-manifest.json` are usually indications
+  of a `next` build error. Try running `$(npm bin)/next build` to see the
+  exact error.
+
+## Deploy URLS:
+
+POL Admin Interface & API
+http://dna-admin-dev.instinct.is/
+http://dna-admin-staging.instinct.is/
+
+POL Frontend Interface
+https://dna-frontend-dev.instinct.is/
+https://dna-frontend-staging.instinct.is/
+
+## Keeping Your Code Updated:
+
+When there are lots of active changes occuring on this repo, make sure to regularly:
+
+1. Commit (or stash) your local changes on your branch
+1. `git fetch origin`
+1. `git checkout main`
+1. `git pull origin main`
+1. `git checkout <your_branch>`
+1. `git merge main`
+1. Fix merge conflicts (if any)
+1. `git add .`
+1. `git commit -m 'merge in latest main'`
+
+Done!
+…now you will be up-to-date with latest code. Do this before you submit your PR, and you can be sure it will be a clean merge.
+
+## Testing API Endpoints
+
+https://localhost:8080/apidocs/swagger_ui#/
+
+## Updating a fork:
+
+- `git remote add upstream [email protected]:1instinct/dna-frontend.git`
+- `git fetch upstream`
+- `git checkout main`
+- `git pull upstream main`
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
 
-TODO:
+# TODO:
 
 - Flow / Type Checking
-- React
-- Express (SSR)
-- Redux (project specific data mgmt)
+- ~~React~~
+- ~~SSR~~ (NextJS)
+- ~~State Mgmt~~ (hooks/useContext... no Redux, yet)
+- ~~Request Mgmt~~ (React Query)
+- ~~Search~~ (Fuse.js)
 - Pusher / API Integration
-- Styled Components
+- ~~Styled Components~~ (@emotion/styled)
 - Moving Letters
 - UI Sounds (proprietary: "npm install beeper")
 - Maps
-- File upload
-- Form validation (Formik / React Final Form / YUP / Blitz inspo)
-- Animations / Transitions
+- File upload (ReactDropzone)
+- ~~Form validation (Formik)~~
+- Animations / Transitions (ReactSpring, GSAP)
 - Gestures
 - UI Alerts
 - Uptime Monitoring
 - Twilio
 - Unit Testing
 - Chat widget
-- Chatbot
-- Feature Detection
-- Benchmarking
-- Header tag injection (Helmet)
-- Secrets management
+- Chatbot (Rasa)
+- Browser Feature Detection
+- Speed/Performance Benchmarking (GTMetrix.com API?)
+- Header tags customization (NextJS: `next/header`)
+- ~~Secrets management / Environment variables~~ (`dot-env`)

components/404/FourOhFour.styles.tsx

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+
+export const NotFoundContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: space-around;
+  min-height: 80vh;
+  font-family: ${(p) => p.theme.typography.titleSM.fontFamily};
+`;
+
+export const NotFoundTitle = styled.h1`
+  width: 100%;
+
+  text-align: center;
+`;
+
+export const NotFoundSubtitle = styled.h2`
+  width: 100%;
+  text-align: center;
+`;

components/404/FourOhFour.tsx

@@ -0,0 +1,30 @@
+import Lottie from "react-lottie";
+import { Layout } from "../components";
+import girlAnimation from "../../data/girl.json";
+import { NotFoundContainer, NotFoundTitle, NotFoundSubtitle } from "./FourOhFour.styles";
+
+const animationOptions = {
+  loop: true,
+  autoplay: true,
+  animationData: girlAnimation,
+  rendererSettings: {
+    preserveAspectRatio: "xMidYMid slice"
+  }
+};
+
+export const FourOhFour = () => {
+  return (
+    <Layout>
+      <NotFoundContainer>
+        <Lottie
+          options={animationOptions}
+          width={300}
+          height={300}
+          style={{ pointerEvents: "none" }}
+        />
+        <NotFoundTitle>404</NotFoundTitle>
+        <NotFoundSubtitle>Whoops, keep looking...</NotFoundSubtitle>
+      </NotFoundContainer>
+    </Layout>
+  );
+};

components/404/index.ts

@@ -0,0 +1 @@
+export { FourOhFour } from "./FourOhFour";

components/Alerts/Alert.tsx

@@ -0,0 +1,20 @@
+import Swal from "sweetalert2";
+
+export const Alert = Swal.mixin({
+  customClass: {
+    // container: 'container-class',
+    // popup: 'popup-class',
+    // header: 'header-class',
+    // title: 'title-class',
+    // closeButton: 'close-button-class',
+    icon: "alert-icon",
+    // image: 'image-class',
+    // content: 'content-class',
+    // input: 'input-class',
+    // actions: 'actions-class',
+    confirmButton: "alert-confirm"
+    // cancelButton: 'cancel-button-class',
+    // footer: 'footer-class'
+  },
+  buttonsStyling: false
+});

components/Alerts/index.ts

@@ -0,0 +1 @@
+export { Alert } from "./Alert";

components/Animations/Animations.tsx

@@ -0,0 +1,45 @@
+import { fadeIn, slideInRight, slideOutLeft } from "react-animations";
+import { useSpring, animated } from "react-spring";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+
+export const fadeInKeyframes = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`;
+
+export const fadeInOutKeyframes = keyframes`
+  0% { opacity: 1; }
+  50% { opacity: 0.25; }
+  100% { opacity: 1; }
+`;
+
+export const SlideInLeftKeyframes = keyframes`
+  0% { transform: translateX(-5rem); opacity: 0; }
+  100% { transform: translateX(0); opacity: 1; }
+`;
+
+export const SlideOutLeftKeyframes = keyframes`
+  0% { transform: translateX(0rem); opacity: 1; }
+  100% { transform: translateX(-5rem); opacity: 0; }
+`;
+
+// export const slideInLeftKeyframes = keyframes`${slideInLeft}`;
+
+// export const slideOutLeftKeyframes = keyframes`${slideOutLeft}`;
+
+export const FadeIn = styled.div`
+  animation: 0.33s ${fadeInKeyframes} ease-in-out infinite;
+`;
+
+export const FadeInOut = styled.div`
+  animation: 0.33s ${fadeInOutKeyframes} linear infinite;
+`;
+
+export const SlideOutLeft = styled.div`
+  animation: 0.33s ${SlideOutLeftKeyframes} cubic-bezier(0.215, 0.61, 0.355, 1);
+`;
+
+export const SlideInLeft = styled.div`
+  animation: 0.33s ${SlideInLeftKeyframes} cubic-bezier(0.215, 0.61, 0.355, 1);
+`;

components/Animations/index.ts

@@ -0,0 +1 @@
+export * from "./Animations";

components/AuthForm/AuthForm.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import styled from "@emotion/styled";
+import { SignupForm } from "../SignupForm";
+import { Login } from "../Login";
+import { ResetPassword } from "../ResetPassword";
+
+import { AuthFormType } from "./constants";
+import { useAuth } from "../../config/auth";
+
+const FieldContainer = styled.div`
+  margin: 15px 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+`;
+
+interface Props {
+  formType: AuthFormType;
+}
+
+export const AuthForm = ({ formType }: Props) => {
+  switch (formType) {
+    case AuthFormType.login:
+      return <Login />;
+    case AuthFormType.signup:
+      return <SignupForm />;
+    case AuthFormType.reset_password:
+      return <ResetPassword />;
+    default:
+      return null;
+  }
+};