feat: Add import path alias. (#247)

README.md

@@ -24,6 +24,7 @@ We're always improving on this, and we welcome suggestions from the community!
 - Customizable [Hygen Templates](https://www.hygen.io/) to generate new files
 - Fully wired up login/signup pages with client and server-side validation.
 - Eslint pre-configured with [Echobind best practices](https://github.com/echobind/eslint-plugin-echobind)
+- Import path alias to the root project folder (`@/`) to avoid the need for long relative import paths.
 
 ## Conventions
 

packages/create-bison-app/template/README.md.ejs

@@ -69,7 +69,7 @@ Because Nexus is strongly typed, all of the `t.` operations should autocomplete
   ```ts
   import { objectType, inputObjectType, queryField, mutationField, arg, list, nonNull } from 'nexus';
 
-  import { isAdmin } from '../../services/permissions';
+  import { isAdmin } from '@/services/permissions';
 
   // Organization Type
   export const Organization = objectType({
@@ -272,8 +272,8 @@ export const OrganizationFactory = {
 Here we use inline snapshots to confirm the error message content, but you can also manually assert the content.
 
 ```ts
-import { graphQLRequest, graphQLRequestAsUser, resetDB, disconnect } from '../../helpers';
-import { OrganizationFactory } from '../factories/organization';
+import { graphQLRequest, graphQLRequestAsUser, resetDB, disconnect } from '@/tests/helpers';
+import { OrganizationFactory } from '@/tests/factories/organization';
 
 beforeEach(async () => resetDB());
 afterAll(async () => disconnect());
@@ -515,7 +515,7 @@ import React from 'react';
 import gql from 'graphql-tag';
 import { Spinner, Text } from '@chakra-ui/react';
 
-import { OrganizationQuery, useOrganizationQuery } from '../types';
+import { OrganizationQuery, useOrganizationQuery } from '@/types';
 
 export const QUERY = gql`
   query organization($where: OrganizationWhereUniqueInput!) {
@@ -556,7 +556,7 @@ import Head from 'next/head';
 import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 
-import { OrganizationCell } from '../../cells/Organization';
+import { OrganizationCell } from '@/cells/Organization';
 
 function OrganizationPage() {
   const router = useRouter();

packages/create-bison-app/template/_templates/cell/new/new.ejs

@@ -7,7 +7,7 @@ import React from 'react';
 import gql from 'graphql-tag';
 import { Spinner, Text } from '@chakra-ui/react';
 
-import { useMyProfileQuery, MyProfileQuery } from '../types';
+import { useMyProfileQuery, MyProfileQuery } from '@/types';
 
 export const QUERY = gql`
   query myProfile {

packages/create-bison-app/template/_templates/graphql/new/graphql.ejs

@@ -5,7 +5,7 @@ to: graphql/modules/<%= name %>.ts
 <% plural = h.inflection.pluralize(camelized) -%>
 import { objectType, inputObjectType, queryField, mutationField, arg, list, nonNull } from 'nexus';
 
-import { isAdmin } from '../../services/permissions';
+import { isAdmin } from '@/services/permissions';
 
 // <%= camelized %> Type
 export const <%= camelized %> = objectType({

packages/create-bison-app/template/_templates/test/component/component.ejs

@@ -4,8 +4,8 @@ to: tests/unit/components/<%= h.camelizedBaseName(name) %>.test.tsx
 <% component = h.camelizedBaseName(name) -%>
 import React from 'react';
 
-import { render } from '../../../tests/utils';
-import { <%= component %> } from '../../../components/<%= component %>';
+import { render } from '@/tests/utils';
+import { <%= component %> } from '@/components/<%= component %>';
 
 describe('<%= component %>', () => {
   it('loads', async () => {

packages/create-bison-app/template/_templates/test/factory/factory.ejs

@@ -6,8 +6,8 @@ to: tests/factories/<%= name %>.ts
 import { Prisma } from '@prisma/client';
 // import Chance from 'chance';
 
-import { buildPrismaIncludeFromAttrs } from '../helpers/buildPrismaIncludeFromAttrs';
-import { prisma } from '../../lib/prisma'
+import { buildPrismaIncludeFromAttrs } from '@/tests/helpers/buildPrismaIncludeFromAttrs';
+import { prisma } from '@/lib/prisma'
 
 // const chance = new Chance();
 

packages/create-bison-app/template/_templates/test/request/request.ejs

@@ -5,8 +5,8 @@ to: tests/requests/<%= name %>.test.ts
 <% model = name.split('/')[0] %>
 <% section = h.baseName(name) -%>
 <% upper = h.inflection.camelize(model, false) -%>
-import { graphQLRequest, graphQLRequestAsUser, resetDB, disconnect } from '../../helpers';
-import { <%= upper %>Factory } from '../../factories/<%= model %>';
+import { graphQLRequest, graphQLRequestAsUser, resetDB, disconnect } from '@/tests/helpers';
+import { <%= upper %>Factory } from '@/tests/factories/<%= model %>';
 
 beforeEach(async () => resetDB());
 afterAll(async () => disconnect());
@@ -53,4 +53,4 @@ describe('<%= upper %> <%= section %> mutation', () => {
       expect(response.body).toBe(true)
     })
   })
-});
+});

packages/create-bison-app/template/components/AllProviders.tsx

@@ -3,9 +3,9 @@ import { ApolloClient, ApolloProvider, NormalizedCacheObject } from '@apollo/cli
 import { ChakraProvider, CSSReset } from '@chakra-ui/react';
 import { Dict } from '@chakra-ui/utils';
 
-import { AuthProvider } from '../context/auth';
-import { createApolloClient } from '../lib/apolloClient';
-import defaultTheme from '../chakra';
+import { AuthProvider } from '@/context/auth';
+import { createApolloClient } from '@/lib/apolloClient';
+import defaultTheme from '@/chakra';
 
 interface Props {
   apolloClient?: ApolloClient<NormalizedCacheObject>;

packages/create-bison-app/template/components/LoginForm.tsx

@@ -4,12 +4,12 @@ import { Flex, Text, FormControl, FormLabel, Input, Stack, Button, Circle } from
 import { useForm } from 'react-hook-form';
 import { gql } from '@apollo/client';
 
-import { EMAIL_REGEX } from '../constants';
-import { useAuth } from '../context/auth';
-import { ErrorText } from '../components/ErrorText';
-import { Link } from './Link';
-import { setErrorsFromGraphQLErrors } from '../utils/setErrors';
-import { LoginMutationVariables, useLoginMutation } from '../types';
+import { EMAIL_REGEX } from '@/constants';
+import { useAuth } from '@/context/auth';
+import { ErrorText } from '@/components/ErrorText';
+import { Link } from '@/components/Link';
+import { setErrorsFromGraphQLErrors } from '@/utils/setErrors';
+import { LoginMutationVariables, useLoginMutation } from '@/types';
 
 export const LOGIN_MUTATION = gql`
   mutation login($email: String!, $password: String!) {

packages/create-bison-app/template/components/SignupForm.tsx

@@ -4,13 +4,12 @@ import { gql } from '@apollo/client';
 import { useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
 
-import { useAuth } from '../context/auth';
-import { setErrorsFromGraphQLErrors } from '../utils/setErrors';
-import { SignupMutationVariables, useSignupMutation } from '../types';
-import { EMAIL_REGEX } from '../constants';
-
-import { Link } from './Link';
-import { ErrorText } from './ErrorText';
+import { useAuth } from '@/context/auth';
+import { setErrorsFromGraphQLErrors } from '@/utils/setErrors';
+import { SignupMutationVariables, useSignupMutation } from '@/types';
+import { EMAIL_REGEX } from '@/constants';
+import { Link } from '@/components/Link';
+import { ErrorText } from '@/components/ErrorText';
 
 export const SIGNUP_MUTATION = gql`
   mutation signup($data: SignupInput!) {

packages/create-bison-app/template/context/auth.tsx

@@ -1,10 +1,10 @@
 import React, { createContext, useContext, ReactNode, useState, useEffect } from 'react';
 import { gql } from '@apollo/client';
 
-import { cookies } from '../lib/cookies';
-import { useMeLazyQuery, User } from '../types';
-import { FullPageSpinner } from '../components/FullPageSpinner';
-import { LOGIN_TOKEN_KEY } from '../constants';
+import { cookies } from '@/lib/cookies';
+import { useMeLazyQuery, User } from '@/types';
+import { FullPageSpinner } from '@/components/FullPageSpinner';
+import { LOGIN_TOKEN_KEY } from '@/constants';
 
 const now = new Date();
 const timeValidInMs = 365 * 24 * 60 * 60 * 1000;

packages/create-bison-app/template/cypress/plugins/index.ts

@@ -5,10 +5,10 @@ import path from 'path';
 
 import { User } from '@prisma/client';
 
-import { cookies } from '../../lib/cookies';
-import { LOGIN_TOKEN_KEY } from '../../constants';
-import { resetDB, disconnect, setupDB, graphQLRequest } from '../../tests/helpers';
-import * as Factories from '../../tests/factories';
+import { cookies } from '@/lib/cookies';
+import { LOGIN_TOKEN_KEY } from '@/constants';
+import { resetDB, disconnect, setupDB, graphQLRequest } from '@/tests/helpers';
+import * as Factories from '@/tests/factories';
 
 declare global {
   // eslint-disable-next-line

packages/create-bison-app/template/cypress/support/commands.ts

@@ -1,8 +1,9 @@
+import '@testing-library/cypress/add-commands';
+
 import { Prisma, User } from '@prisma/client';
 
-import '@testing-library/cypress/add-commands';
-import { LOGIN_TOKEN_KEY } from '../../constants';
-import { LoginTaskObject } from '../plugins';
+import { LOGIN_TOKEN_KEY } from '@/constants';
+import { LoginTaskObject } from '@/cypress/plugins';
 
 declare global {
   // eslint-disable-next-line

packages/create-bison-app/template/graphql/context.ts

@@ -3,8 +3,8 @@ import { IncomingMessage } from 'http';
 import { Context as ApolloContext } from 'apollo-server-core';
 import { PrismaClient, User } from '@prisma/client';
 
-import { prisma } from '../lib/prisma';
-import { verifyAuthHeader } from '../services/auth';
+import { prisma } from '@/lib/prisma';
+import { verifyAuthHeader } from '@/services/auth';
 
 /**
  * Populates a context object for use in resolvers.

packages/create-bison-app/template/graphql/modules/profile.ts

@@ -1,6 +1,6 @@
 import { inputObjectType, objectType } from 'nexus';
 
-import { NotFoundError } from '../errors';
+import { NotFoundError } from '@/graphql/errors';
 
 // Profile Type
 export const Profile = objectType({

packages/create-bison-app/template/graphql/modules/user.ts.ejs

@@ -12,9 +12,9 @@ import {
 import { Role } from '@prisma/client';
 import { UserInputError } from 'apollo-server-micro';
 
-import { prismaArgObject } from '../helpers';
-import { hashPassword, appJwtForUser, comparePasswords } from '../../services/auth';
-import { canAccess, isAdmin } from '../../services/permissions';
+import { hashPassword, appJwtForUser, comparePasswords } from '@/services/auth';
+import { canAccess, isAdmin } from '@/services/permissions';
+import { prismaArgObject } from '@/graphql/helpers';
 
 // User Type
 export const User = objectType({
@@ -257,8 +257,9 @@ export const UserCreateInput = inputObjectType({
     t.field('roles', {
       type: list('Role'),
     });
+
     t.field('profile', {
-      type: 'ProfileRelationalCreateInput'
-    })
+      type: 'ProfileRelationalCreateInput',
+    });
   },
 });

packages/create-bison-app/template/graphql/schema.ts

@@ -2,10 +2,10 @@ import path from 'path';
 
 import { declarativeWrappingPlugin, fieldAuthorizePlugin, makeSchema } from 'nexus';
 
-import prettierConfig from '../prettier.config';
-
 import * as types from './modules';
 
+import prettierConfig from '@/prettier.config';
+
 const currentDirectory = process.cwd();
 
 export const schema = makeSchema({

packages/create-bison-app/template/jest.config.js

@@ -1,3 +1,13 @@
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+
+const { compilerOptions } = require('./tsconfig.json');
+
+// this creates a module name map based on all the path aliases from tsconfig
+// (so you only need to add path aliases in tsconfig, not here).
+const moduleNameMapper = compilerOptions.paths
+  ? pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/../' })
+  : {};
+
 const testPathIgnorePatterns = [
   '<rootDir>/node_modules',
   'cypress',
@@ -21,4 +31,5 @@ module.exports = {
       },
     },
   },
+  moduleNameMapper,
 };

packages/create-bison-app/template/layouts/LoggedIn.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { Box, Flex, Button } from '@chakra-ui/react';
 
-import { Logo } from '../components/Logo';
-import { Nav } from '../components/Nav';
-import { useAuth } from '../context/auth';
-import { Footer } from '../components/Footer';
+import { Logo } from '@/components/Logo';
+import { Nav } from '@/components/Nav';
+import { useAuth } from '@/context/auth';
+import { Footer } from '@/components/Footer';
 
 interface Props {
   children: React.ReactNode;

packages/create-bison-app/template/layouts/LoggedOut.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 
-import { ButtonLink } from '../components/Link';
-import { Logo } from '../components/Logo';
-import { Footer } from '../components/Footer';
+import { ButtonLink } from '@/components/Link';
+import { Logo } from '@/components/Logo';
+import { Footer } from '@/components/Footer';
 
 interface Props {
   children: React.ReactNode;

packages/create-bison-app/template/lib/apolloClient.ts

@@ -3,10 +3,10 @@ import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
 import fetch from 'cross-fetch';
 
-import { LOGIN_TOKEN_KEY } from '../constants';
-
 import { cookies } from './cookies';
 
+import { LOGIN_TOKEN_KEY } from '@/constants';
+
 export function createApolloClient(ctx?: Record<string, any>) {
   // Apollo needs an absolute URL when in SSR, so determine host
   let host: string;

packages/create-bison-app/template/package.json.ejs

@@ -41,7 +41,7 @@
     "test:e2e": "cross-env DOTENV_CONFIG_PATH=.env.test ts-node -r dotenv/config $(yarn bin)/start-server-and-test 'yarn test:server' http://localhost:3001 'yarn cypress:run'",
     "test:e2e:local": "cross-env CYPRESS_LOCAL=true CYPRESS_BASE_URL=http://localhost:3000 cypress open",
     "test:server": "next start --port 3001",
-    "ts-node": "ts-node-dev --project tsconfig.cjs.json",
+    "ts-node": "ts-node-dev --project tsconfig.cjs.json -r tsconfig-paths/register",
     "withEnv:test": "cross-env DOTENV_CONFIG_PATH=.env.test yarn ts-node -r dotenv/config ./scripts/yarnWithEnv",
     "watch:all": "concurrently -n \"NEXUS,GQLCODEGEN,TYPESCRIPT\" -c \"black.bgGreen.dim,black.bgBlue.dim,white.bgMagenta.dim\" \"yarn watch:nexus\" \"yarn watch:codegen\" \"yarn watch:ts\"",
     "watch:codegen": "yarn codegen --watch",
@@ -117,6 +117,7 @@
     "supertest": "^4.0.2",
     "ts-jest": "^27.0.5",
     "ts-node-dev": "^1.1.8",
+    "tsconfig-paths": "^3.12.0",
     "typescript": "^4.4.3"
   },
   "bison": {

packages/create-bison-app/template/pages/_app.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 
-import { AllProviders } from '../components/AllProviders';
-import { useAuth } from '../context/auth';
+import { AllProviders } from '@/components/AllProviders';
+import { useAuth } from '@/context/auth';
 
 /**
  * Dynamically load layouts. This codesplits and prevents code from the logged in layout from being
  * included in the bundle if we're rendering the logged out layout.
  */
 const LoggedInLayout = dynamic<{ children: React.ReactNode }>(() =>
-  import('../layouts/LoggedIn').then((mod) => mod.LoggedInLayout)
+  import('@/layouts/LoggedIn').then((mod) => mod.LoggedInLayout)
 );
 
 const LoggedOutLayout = dynamic<{ children: React.ReactNode }>(() =>
-  import('../layouts/LoggedOut').then((mod) => mod.LoggedOutLayout)
+  import('@/layouts/LoggedOut').then((mod) => mod.LoggedOutLayout)
 );
 
 /**

packages/create-bison-app/template/pages/api/graphql.ts

@@ -6,8 +6,8 @@ import {
 import { ApolloServer } from 'apollo-server-micro';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
-import { createContext } from '../../graphql/context';
-import { schema } from '../../graphql/schema';
+import { createContext } from '@/graphql/context';
+import { schema } from '@/graphql/schema';
 
 export const GRAPHQL_PATH = '/api/graphql';
 

packages/create-bison-app/template/pages/login.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Head from 'next/head';
 
-import { CenteredBoxForm } from '../components/CenteredBoxForm';
-import { LoginForm } from '../components/LoginForm';
+import { CenteredBoxForm } from '@/components/CenteredBoxForm';
+import { LoginForm } from '@/components/LoginForm';
 
 function LoginPage() {
   return (

packages/create-bison-app/template/pages/signup.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Head from 'next/head';
 
-import { CenteredBoxForm } from '../components/CenteredBoxForm';
-import { SignupForm } from '../components/SignupForm';
+import { CenteredBoxForm } from '@/components/CenteredBoxForm';
+import { SignupForm } from '@/components/SignupForm';
 
 function SignupPage() {
   return (