feat: add application shell

apps/portal/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['tih', 'next/core-web-vitals'],
+  extends: ['tih'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],

apps/portal/next.config.mjs

@@ -13,6 +13,9 @@ function defineNextConfig(config) {
 }
 
 export default defineNextConfig({
+  experimental: {
+    newNextLinkBehavior: true,
+  },
   reactStrictMode: true,
   swcMinify: true,
 });

apps/portal/package.json

@@ -12,6 +12,8 @@
     "prisma": "prisma"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.2",
+    "@heroicons/react": "^2.0.11",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@prisma/client": "^4.4.0",
     "@tih/ui": "*",
@@ -19,6 +21,7 @@
     "@trpc/next": "^9.27.2",
     "@trpc/react": "^9.27.2",
     "@trpc/server": "^9.27.2",
+    "clsx": "^1.2.1",
     "next": "12.3.1",
     "next-auth": "~4.10.3",
     "react": "18.2.0",
@@ -28,6 +31,10 @@
     "zod": "^3.18.0"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/typography": "^0.5.7",
     "@tih/tsconfig": "*",
     "@types/node": "18.0.0",
     "@types/react": "18.0.21",

apps/portal/src/components/global/AppShell.tsx

@@ -0,0 +1,274 @@
+import clsx from 'clsx';
+import Link from 'next/link';
+import { signIn, signOut, useSession } from 'next-auth/react';
+import type { ReactNode } from 'react';
+import { Fragment, useState } from 'react';
+import { Dialog, Menu, Transition } from '@headlessui/react';
+import {
+  Bars3BottomLeftIcon,
+  BriefcaseIcon,
+  CurrencyDollarIcon,
+  DocumentTextIcon,
+  HomeIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
+
+const sidebarNavigation = [
+  { current: false, href: '/', icon: HomeIcon, name: 'Home' },
+  { current: false, href: '/resumes', icon: DocumentTextIcon, name: 'Resumes' },
+  {
+    current: false,
+    href: '/questions',
+    icon: BriefcaseIcon,
+    name: 'Questions',
+  },
+  { current: false, href: '/offers', icon: CurrencyDollarIcon, name: 'Offers' },
+];
+
+type Props = Readonly<{
+  children: ReactNode;
+}>;
+
+function ProfileJewel() {
+  const { data: session, status } = useSession();
+  const isSessionLoading = status === 'loading';
+
+  if (isSessionLoading) {
+    return null;
+  }
+
+  if (session == null) {
+    return (
+      <a
+        href="/api/auth/signin"
+        onClick={(event) => {
+          event.preventDefault();
+          signIn();
+        }}>
+        Sign in
+      </a>
+    );
+  }
+
+  const userNavigation = [
+    { href: '/profile', name: 'Profile' },
+    {
+      href: '/api/auth/signout',
+      name: 'Sign out',
+      onClick: (event: MouseEvent) => {
+        event.preventDefault();
+        signOut();
+      },
+    },
+  ];
+
+  return (
+    <Menu as="div" className="relative flex-shrink-0">
+      <div>
+        <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          <span className="sr-only">Open user menu</span>
+          {session?.user?.image == null ? (
+            <span>Render some icon</span>
+          ) : (
+            <img
+              alt={session?.user?.email ?? session?.user?.name ?? ''}
+              className="h-8 w-8 rounded-full"
+              src={session?.user.image}
+            />
+          )}
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95">
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          {userNavigation.map((item) => (
+            <Menu.Item key={item.name}>
+              {({ active }) => (
+                <Link
+                  className={clsx(
+                    active ? 'bg-gray-100' : '',
+                    'block px-4 py-2 text-sm text-gray-700',
+                  )}
+                  href={item.href}
+                  onClick={item.onClick}>
+                  {item.name}
+                </Link>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}
+
+export default function AppShell({ children }: Props) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen h-full">
+      {/* Narrow sidebar */}
+      <div className="hidden w-28 overflow-y-auto bg-indigo-700 md:block">
+        <div className="flex w-full flex-col items-center py-6">
+          <div className="flex flex-shrink-0 items-center">
+            <img
+              alt="Your Company"
+              className="h-8 w-auto"
+              src="https://tailwindui.com/img/logos/mark.svg?color=white"
+            />
+          </div>
+          <div className="mt-6 w-full flex-1 space-y-1 px-2">
+            {sidebarNavigation.map((item) => (
+              <Link
+                key={item.name}
+                aria-current={item.current ? 'page' : undefined}
+                className={clsx(
+                  item.current
+                    ? 'bg-indigo-800 text-white'
+                    : 'text-indigo-100 hover:bg-indigo-800 hover:text-white',
+                  'group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium',
+                )}
+                href={item.href}>
+                <item.icon
+                  aria-hidden="true"
+                  className={clsx(
+                    item.current
+                      ? 'text-white'
+                      : 'text-indigo-300 group-hover:text-white',
+                    'h-6 w-6',
+                  )}
+                />
+                <span className="mt-2">{item.name}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      <Transition.Root as={Fragment} show={mobileMenuOpen}>
+        <Dialog
+          as="div"
+          className="relative z-20 md:hidden"
+          onClose={setMobileMenuOpen}>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-opacity ease-linear duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity ease-linear duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0">
+            <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-40 flex">
+            <Transition.Child
+              as={Fragment}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="-translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-x-0"
+              leaveTo="-translate-x-full">
+              <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-indigo-700 pt-5 pb-4">
+                <Transition.Child
+                  as={Fragment}
+                  enter="ease-in-out duration-300"
+                  enterFrom="opacity-0"
+                  enterTo="opacity-100"
+                  leave="ease-in-out duration-300"
+                  leaveFrom="opacity-100"
+                  leaveTo="opacity-0">
+                  <div className="absolute top-1 right-0 -mr-14 p-1">
+                    <button
+                      className="flex h-12 w-12 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-white"
+                      type="button"
+                      onClick={() => setMobileMenuOpen(false)}>
+                      <XMarkIcon
+                        aria-hidden="true"
+                        className="h-6 w-6 text-white"
+                      />
+                      <span className="sr-only">Close sidebar</span>
+                    </button>
+                  </div>
+                </Transition.Child>
+                <div className="flex flex-shrink-0 items-center px-4">
+                  <img
+                    alt="Your Company"
+                    className="h-8 w-auto"
+                    src="https://tailwindui.com/img/logos/mark.svg?color=white"
+                  />
+                </div>
+                <div className="mt-5 h-0 flex-1 overflow-y-auto px-2">
+                  <nav className="flex h-full flex-col">
+                    <div className="space-y-1">
+                      {sidebarNavigation.map((item) => (
+                        <a
+                          key={item.name}
+                          aria-current={item.current ? 'page' : undefined}
+                          className={clsx(
+                            item.current
+                              ? 'bg-indigo-800 text-white'
+                              : 'text-indigo-100 hover:bg-indigo-800 hover:text-white',
+                            'group py-2 px-3 rounded-md flex items-center text-sm font-medium',
+                          )}
+                          href={item.href}>
+                          <item.icon
+                            aria-hidden="true"
+                            className={clsx(
+                              item.current
+                                ? 'text-white'
+                                : 'text-indigo-300 group-hover:text-white',
+                              'mr-3 h-6 w-6',
+                            )}
+                          />
+                          <span>{item.name}</span>
+                        </a>
+                      ))}
+                    </div>
+                  </nav>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+            <div aria-hidden="true" className="w-14 flex-shrink-0">
+              {/* Dummy element to force sidebar to shrink to fit close icon */}
+            </div>
+          </div>
+        </Dialog>
+      </Transition.Root>
+
+      {/* Content area */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="w-full">
+          <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white shadow-sm">
+            <button
+              className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
+              type="button"
+              onClick={() => setMobileMenuOpen(true)}>
+              <span className="sr-only">Open sidebar</span>
+              <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
+            </button>
+            <div className="flex flex-1 justify-between px-4 sm:px-6">
+              <div className="flex flex-1 items-center">Some menu items</div>
+              <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">
+                <ProfileJewel />
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* Main content */}
+        <div className="flex flex-1 items-stretch overflow-hidden">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/portal/src/env/client.mjs

@@ -9,8 +9,9 @@ export const formatErrors = (
 ) =>
   Object.entries(errors)
     .map(([name, value]) => {
-      if (value && '_errors' in value)
+      if (value && '_errors' in value) {
         return `${name}: ${value._errors.join(', ')}\n`;
+      }
     })
     .filter(Boolean);
 
@@ -25,7 +26,7 @@ if (_clientEnv.success === false) {
 /**
  * Validate that client-side environment variables are exposed to the client.
  */
-for (let key of Object.keys(_clientEnv.data)) {
+for (const key of Object.keys(_clientEnv.data)) {
   if (!key.startsWith('NEXT_PUBLIC_')) {
     console.warn(
       `❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,

apps/portal/src/pages/_app.tsx

@@ -1,11 +1,14 @@
 import type { AppType } from 'next/app';
 import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
+import React from 'react';
 import superjson from 'superjson';
 import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
 import { loggerLink } from '@trpc/client/links/loggerLink';
 import { withTRPC } from '@trpc/next';
 
+import AppShell from '~/components/global/AppShell';
+
 import type { AppRouter } from '~/server/router';
 
 import '~/styles/globals.css';
@@ -16,7 +19,9 @@ const MyApp: AppType<{ session: Session | null }> = ({
 }) => {
   return (
     <SessionProvider session={session}>
+      <AppShell>
         <Component {...pageProps} />
+      </AppShell>
     </SessionProvider>
   );
 };

apps/portal/src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html className="h-full bg-gray-50">
+      <Head />
+      <body className="h-full overflow-hidden">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

apps/portal/src/pages/api/auth/[...nextauth].ts

@@ -13,7 +13,9 @@ export const authOptions: NextAuthOptions = {
   // Include user.id on session
   callbacks: {
     session({ session, user }) {
-      if (session.user) {
+      if (session.user != null) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         session.user.id = user.id;
       }
       return session;

apps/portal/src/pages/example.tsx

@@ -0,0 +1,30 @@
+import { trpc } from '~/utils/trpc';
+
+export default function Example() {
+  const hello = trpc.useQuery(['example.hello', { text: 'from tRPC!' }]);
+  const getAll = trpc.useQuery(['example.getAll']);
+
+  return (
+    <>
+      <main className="flex-1 overflow-y-auto">
+        {/* Primary column */}
+        <section
+          aria-labelledby="primary-heading"
+          className="flex h-full min-w-0 flex-1 flex-col lg:order-last">
+          <h1 className="sr-only" id="primary-heading">
+            Photos
+          </h1>
+          <div className="pt-6 text-2xl text-blue-500 flex justify-center items-center w-full">
+            {hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
+          </div>
+          <pre className="w-1/2">{JSON.stringify(getAll.data, null, 2)}</pre>
+        </section>
+      </main>
+
+      {/* Secondary column (hidden on smaller screens) */}
+      <aside className="hidden w-96 overflow-y-auto border-l border-gray-200 bg-white lg:block">
+        {/* Your content */}
+      </aside>
+    </>
+  );
+}

apps/portal/src/pages/index.tsx

@@ -1,91 +1,9 @@
-import type { NextPage } from 'next';
+export default function HomePage() {
-import Head from 'next/head';
-import { CounterButton } from '@tih/ui';
-
-import { trpc } from '~/utils/trpc';
-
-const Home: NextPage = () => {
-  const hello = trpc.useQuery(['example.hello', { text: 'from tRPC!' }]);
-  const getAll = trpc.useQuery(['example.getAll']);
-
   return (
-    <>
+    <main className="flex-1 overflow-y-auto">
-      <Head>
+      <div className="flex h-full items-center justify-center">
-        <title>Create T3 App</title>
+        <h1 className="text-center font-bold text-4xl">Homepage</h1>
-        <meta content="Generated by create-t3-app" name="description" />
-        <link href="/favicon.ico" rel="icon" />
-      </Head>
-      <main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
-        <h1 className="text-5xl md:text-[5rem] leading-normal font-extrabold text-gray-700">
-          Create <span className="text-purple-300">T3</span> App
-        </h1>
-        <CounterButton />
-        <p className="text-2xl text-gray-700">This stack uses:</p>
-        <div className="grid gap-3 pt-3 mt-3 text-center md:grid-cols-2 lg:w-2/3">
-          <TechnologyCard
-            description="The React framework for production"
-            documentation="https://nextjs.org/"
-            name="NextJS"
-          />
-          <TechnologyCard
-            description="Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale"
-            documentation="https://www.typescriptlang.org/"
-            name="TypeScript"
-          />
-          <TechnologyCard
-            description="Rapidly build modern websites without ever leaving your HTML"
-            documentation="https://tailwindcss.com/"
-            name="TailwindCSS"
-          />
-          <TechnologyCard
-            description="End-to-end typesafe APIs made easy"
-            documentation="https://trpc.io/"
-            name="tRPC"
-          />
-          <TechnologyCard
-            description="Authentication for Next.js"
-            documentation="https://next-auth.js.org/"
-            name="Next-Auth"
-          />
-          <TechnologyCard
-            description="Build data-driven JavaScript & TypeScript apps in less time"
-            documentation="https://www.prisma.io/docs/"
-            name="Prisma"
-          />
       </div>
-        <div className="pt-6 text-2xl text-blue-500 flex justify-center items-center w-full">
-          {hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
-        </div>
-        <pre className="w-1/2">{JSON.stringify(getAll.data, null, 2)}</pre>
     </main>
-    </>
-  );
-};
-
-export default Home;
-
-type TechnologyCardProps = {
-  description: string;
-  documentation: string;
-  name: string;
-};
-
-function TechnologyCard({
-  name,
-  description,
-  documentation,
-}: TechnologyCardProps) {
-  return (
-    <section className="flex flex-col justify-center p-6 duration-500 border-2 border-gray-500 rounded shadow-xl motion-safe:hover:scale-105">
-      <h2 className="text-lg text-gray-700">{name}</h2>
-      <p className="text-sm text-gray-600">{description}</p>
-      <a
-        className="mt-3 text-sm underline text-violet-500 decoration-dotted underline-offset-2"
-        href={documentation}
-        rel="noreferrer"
-        target="_blank">
-        Documentation
-      </a>
-    </section>
   );
 }

apps/portal/src/pages/offers/index.tsx

@@ -0,0 +1,9 @@
+export default function OffersHomePage() {
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <h1 className="text-center font-bold text-4xl">Offers Research</h1>
+      </div>
+    </main>
+  );
+}

apps/portal/src/pages/profile.tsx

@@ -0,0 +1,25 @@
+import { useSession } from 'next-auth/react';
+
+export default function ProfilePage() {
+  const { data: session, status } = useSession();
+  const isSessionLoading = status === 'loading';
+
+  if (isSessionLoading) {
+    return null;
+  }
+
+  return (
+    <main className="flex-1 overflow-y-auto p-6 space-y-6">
+      <h1 className="font-bold text-4xl">Profile</h1>
+      {session?.user?.image && (
+        <img
+          alt={session?.user?.email ?? session?.user?.name ?? ''}
+          className="h-24 w-24 rounded-full"
+          src={session?.user.image}
+        />
+      )}
+      {session?.user?.email && <p>{session?.user?.email}</p>}
+      {session?.user?.name && <p>{session?.user?.name}</p>}
+    </main>
+  );
+}

apps/portal/src/pages/questions/index.tsx

@@ -0,0 +1,9 @@
+export default function QuestionsHomePage() {
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <h1 className="text-center font-bold text-4xl">Interview Questions</h1>
+      </div>
+    </main>
+  );
+}

apps/portal/src/pages/resumes/index.tsx

@@ -0,0 +1,9 @@
+export default function ResumeHomePage() {
+  return (
+    <main className="flex-1 overflow-y-auto">
+      <div className="flex h-full items-center justify-center">
+        <h1 className="text-center font-bold text-4xl">Resume Reviews</h1>
+      </div>
+    </main>
+  );
+}

apps/portal/tailwind.config.cjs

@@ -1,8 +1,23 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{js,jsx,ts,tsx,md,mdx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },
-  plugins: [],
+      colors: {
+        primary: colors.purple,
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/line-clamp'),
+    require('@tailwindcss/typography'),
+  ],
 };

packages/eslint-config-tih/index.js

@@ -13,7 +13,7 @@ module.exports = {
     'typescript-sort-keys',
   ],
   extends: [
-    'next',
+    'next/core-web-vitals',
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',

yarn.lock

@@ -1053,6 +1053,14 @@
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
 
+"@headlessui/react@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.2.tgz#e6a6a8d38342064a53182f1eb2bf6d9c1e53ba6a"
+
+"@heroicons/react@^2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.11.tgz#2c6cf4c66d81142ec87c102502407d8c353558bb"
+
 "@humanwhocodes/config-array@^0.10.5":
   version "0.10.6"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.6.tgz#70b53559baf544dc2cc5eea6082bf90467ccb1dc"
@@ -2171,6 +2179,29 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/aspect-ratio@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba"
+
+"@tailwindcss/forms@^0.5.3":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7"
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+
+"@tailwindcss/typography@^0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@trpc/client@^9.27.2":
   version "9.27.2"
   resolved "https://registry.yarnpkg.com/@trpc/client/-/client-9.27.2.tgz#1b4ae3c12c5666e81322fddd787d48b0901b75a1"
@@ -3735,6 +3766,10 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -6722,10 +6757,18 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -7011,6 +7054,10 @@ min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -7896,7 +7943,7 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
+postcss-selector-parser@6.0.10, postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   dependencies: