feat: prisma db connector (#47)

* style: layout and github link button

* feat: prisma

* chore(release): 1.4.0

* docs: roadmap

* fix: cache hash key

* ci(caches): remove unused conf

Author: FabienGreard

.env

@@ -0,0 +1,6 @@
+HOSTNAME=localhost
+PORT=3000
+# https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
+NEXT_PUBLIC_HOST=http://$HOSTNAME:$PORT
+# You can start with this url, but you may need to configure your own database as this is only an example with a read only user !
+DATABASE_URL=postgresql://baby_kirby:1234@kirby.cgqxnhhl7oal.eu-west-3.rds.amazonaws.com:5432/kirby?schema=public

.github/workflows/tests.yml

@@ -48,7 +48,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
-          key: ${{ runner.os }}-build-
+          key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-
 
@@ -86,7 +86,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
-          key: ${{ runner.os }}-build-
+          key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-build-
 
@@ -121,7 +121,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
-          key: ${{ runner.os }}-build-
+          key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-build-
 

.gitignore

@@ -68,5 +68,8 @@ yarn-error.log*
 # apollo
 graphql-schema.json
 
+# prisma
+prisma/migrations
+
 # lhci
 .lighthouseci

CHANGELOG.md

@@ -2,17 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 1.4.0 (2021-05-03)
+
+### Features
+
+- prisma ([1961a6b](https://github.com/FabienGreard/kirby-boilerplate/commit/1961a6b5f1b49941ffbde81ea737c8abdd8602f1))
+
 ## 1.3.0 (2021-04-10)
 
 ### Features
 
-- graphQL ([#36](https://github.com/FabienGreard/kirby-boilerplate/issues/36)) ([3083241](https://github.com/FabienGreard/kirby-boilerplate/commit/c9078cb88cd34e617dd3e2564515f351dfdf4223))
+- graphQL ([#36](https://github.com/FabienGreard/kirby-boilerplate/issues/36)) ([5381151](https://github.com/FabienGreard/kirby-boilerplate/commit/538115108802804256f16b6ed2ed0ec74efbe4f2))
 
 ## 1.2.0 (2021-03-22)
 
 ### Features
 
-- design-system ([#7](https://github.com/FabienGreard/kirby-boilerplate/issues/7)) ([cc4c825](https://github.com/FabienGreard/kirby-boilerplate/commit/cc4c8259c1afff4b60350a1a4b7eb7dec43cfdda))
+- design-system ([#7](https://github.com/FabienGreard/kirby-boilerplate/issues/7)) ([bf61341](https://github.com/FabienGreard/kirby-boilerplate/commit/bf613412bcaa781a7b65f342b053ecc0dbe13ff9)), closes [#16](https://github.com/FabienGreard/kirby-boilerplate/issues/16) [#15](https://github.com/FabienGreard/kirby-boilerplate/issues/15) [#11](https://github.com/FabienGreard/kirby-boilerplate/issues/11) [#12](https://github.com/FabienGreard/kirby-boilerplate/issues/12) [#14](https://github.com/FabienGreard/kirby-boilerplate/issues/14) [#17](https://github.com/FabienGreard/kirby-boilerplate/issues/17) [#21](https://github.com/FabienGreard/kirby-boilerplate/issues/21) [#22](https://github.com/FabienGreard/kirby-boilerplate/issues/22) [#20](https://github.com/FabienGreard/kirby-boilerplate/issues/20) [#18](https://github.com/FabienGreard/kirby-boilerplate/issues/18) [#26](https://github.com/FabienGreard/kirby-boilerplate/issues/26) [#25](https://github.com/FabienGreard/kirby-boilerplate/issues/25) [#23](https://github.com/FabienGreard/kirby-boilerplate/issues/23) [#19](https://github.com/FabienGreard/kirby-boilerplate/issues/19) [#24](https://github.com/FabienGreard/kirby-boilerplate/issues/24) [#31](https://github.com/FabienGreard/kirby-boilerplate/issues/31) [#30](https://github.com/FabienGreard/kirby-boilerplate/issues/30) [#29](https://github.com/FabienGreard/kirby-boilerplate/issues/29) [#27](https://github.com/FabienGreard/kirby-boilerplate/issues/27) [#28](https://github.com/FabienGreard/kirby-boilerplate/issues/28) [#32](https://github.com/FabienGreard/kirby-boilerplate/issues/32) [#33](https://github.com/FabienGreard/kirby-boilerplate/issues/33) [#34](https://github.com/FabienGreard/kirby-boilerplate/issues/34) [#35](https://github.com/FabienGreard/kirby-boilerplate/issues/35)
 
 ## 1.1.0 (2021-03-21)
 

README.md

@@ -21,7 +21,9 @@ Start by cloning this repository, then use either `yarn install` or `npm install
 
 ## Getting Started
 
-First, run the development server:
+First look at the `.env` file. (you can start with the default)
+
+Then, run the development server:
 
 ```bash
 npm run dev
@@ -52,6 +54,10 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 | bump:major      |                                                standard-version --release-as major --no-verify                                                |                                    v.0.0.0 => v.1.0.0 |
 | apollo:download |                         npx apollo service:download --endpoint=http://localhost:3000/api/graphql graphql-schema.json                          |            download a graphql schema from an endpoint |
 | apollo:generate | npx apollo codegen:generate types --localSchemaFile=graphql-schema.json --target=typescript --tagName=gql --outputFlat --tsFileExtension=d.ts | use for generating typing files from a graphql schema |
+| ts-node         |                                            ts-node --compiler-options '{\"module\":\"CommonJS\"}'                                             |                                    use by prisma:seed |
+| prisma:migrate  |                                                              prisma migrate dev                                                               |                 prisma database schema migration tool |
+| prisma:seed     |                                                       prisma db seed --preview-feature                                                        |                             prisma database seed tool |
+| prisma:generate |                                                                prisma generate                                                                |                                generate prisma client |
 | clear           |                                                             node scripts/clear.js                                                             |                         clear node_modules and \*lock |
 | prepare         |                                                                 husky install                                                                 |       This is needed from husky to set up the project |
 
@@ -61,6 +67,7 @@ This project is build with :
 
 - [NextJs](https://nextjs.org/)
 - [Apollo](https://www.apollographql.com/)
+- [prisma](https://www.prisma.io/)
 - [Tailwindcss](https://tailwindcss.com/)
 - [Typescript](https://www.typescriptlang.org/)
 - [react-intl](https://formatjs.io/)
@@ -110,12 +117,39 @@ Given the [conventionalcommits](https://www.conventionalcommits.org/en/v1.0.0/):
 [optional footer(s)]
 ```
 
+## Setting up your own database (e.g. PostgreSQL, MySQL, SQL Server)
+
+If you want to use another database than PostgreSQL, you can adjust the database connection in [`prisma/schema.prisma`](hhttps://github.com/FabienGreard/kirby-boilerplate/tree/main/prisma/schema.prisma) by reconfiguring the datasource block.
+
+Learn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).
+
+At this point your should be able to execute `yarn prisma:migrate` or `npm run prisma:migrate` to initialise your database with the base schema.
+
+You could also seed your database with `yarn prisma:seed` or `npm run prisma:seed`.
+
 ## Generate typing from graphql schema
 
 You may need to look at [apollo-tooling](https://github.com/apollographql/apollo-tooling)
 
 With the graphql endpoint running launch `yarn apollo:download` follow by `yarn apollo:generate`, this will create under `types` a typing file for each query under `apollo/operations`.
 
+## Hosting
+
+Kirby use [vercel](https://vercel.com/docs) however you can use any other hosting service.
+
+## Roadmap:
+
+(Would love Pull requests that build towards these objectives)
+
+- [ ] Add a CLI installer like cra / cna
+- [ ] Multiple install with opt-out feature e.f without apollo, with monorepo etc...
+  - [ ] Monorepo
+  - [ ] Without server / api (remove apollo)
+  - [ ] More installer ??
+- [ ] Better doc ?
+- [ ] Feature projects build with Kirby
+- [ ] Feature contributors
+
 ## Contributing
 
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

apollo/resolvers.ts

@@ -1,7 +1,9 @@
+import prisma from 'prisma/index';
+
 export default {
   Query: {
     viewer() {
-      return { id: 1, name: 'Kirby Doe' };
+      return prisma.user.findFirst();
     },
   },
 };

components/Head.tsx

@@ -1,6 +1,6 @@
 import NextHead from 'next/head';
 
-import { SEO } from 'utils/constant';
+import { SEO, HOST } from 'utils/constant';
 
 interface Props {
   title?: string;
@@ -12,6 +12,9 @@ export default function Head({ title = SEO.title, description = SEO.description
     <NextHead>
       <title>{title}</title>
       <meta name="description" content={description} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={`${HOST}/images/og-image.png`} />
       <link rel="icon" href="/favicon.ico" />
       <link rel="manifest" href="/manifest.json" />
       <meta name="theme-color" content="#fff" />

components/Icons/Github.tsx

@@ -0,0 +1,15 @@
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  color?: string;
+}
+
+export default function SvgGithub({ size = 64, color, ...props }: Props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 496 512" {...props}>
+      <path
+        className={`fill-current ${color ?? 'text-white'}`}
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      />
+    </svg>
+  );
+}

components/Icons/__tests__/Github.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import GithubSVG from 'components/Icons/Github';
+
+describe('ReactSVG', () => {
+  it('Should match snapshots', () => {
+    const { container } = render(<GithubSVG />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/Icons/__tests__/__snapshots__/Github.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactSVG Should match snapshots 1`] = `
+<div>
+  <svg
+    height="64"
+    viewBox="0 0 496 512"
+    width="64"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="fill-current text-white"
+      d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+    />
+  </svg>
+</div>
+`;

components/Layout.tsx

@@ -0,0 +1,61 @@
+import { useIntl } from 'react-intl';
+
+import Head from 'components/Head';
+import GithubSVG from 'components/Icons/Github';
+import { withLink } from 'components/Link';
+
+import Button from 'design-system/Button';
+
+import { VERSION, GITHUB_URL } from 'utils/constant';
+
+import * as langs from 'langs';
+
+const ButtonWithLink = withLink(Button);
+
+const Header = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <header>
+      <a href={GITHUB_URL} target="_blank" rel="noreferrer">
+        <Button
+          label={formatMessage({ id: 'githubLinkMessage' })}
+          icon={<GithubSVG size={24} />}
+          size="small"
+          className="space-x-2"
+          primary
+        />
+      </a>
+    </header>
+  );
+};
+
+const Footer = () => {
+  const { formatDate } = useIntl();
+
+  const Langs = () => (
+    <div className="flex justify-center space-x-1">
+      {Object.keys(langs).map(lang => (
+        <ButtonWithLink key={lang} locale={lang} href="/" label={lang} size="small" />
+      ))}
+    </div>
+  );
+
+  return (
+    <footer className="text-xs md:text-sm space-y-1">
+      <Langs />
+      <p>{`v.${VERSION} - ${formatDate(Date.now())}`}</p>
+    </footer>
+  );
+};
+
+export default function Layout({ children }) {
+  return (
+    <div className="flex flex-col h-screen items-center justify-between p-1 md:p-2">
+      <Head />
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </div>
+  );
+}

components/__tests__/Layout.test.tsx

@@ -0,0 +1,15 @@
+import { render } from 'utils/customTestRender';
+import Layout from 'components/Layout';
+
+describe('Layout', () => {
+  test('Should render a Layout element', () => {
+    const { getByText, getByTestId } = render(
+      <Layout>
+        <h1 data-testid="title">Title</h1>
+      </Layout>,
+    );
+
+    expect(getByText('Title')).toBeInTheDocument();
+    expect(getByTestId('title')).toBeInTheDocument();
+  });
+});

design-system/Button.tsx

@@ -23,6 +23,10 @@ export interface ButtonProps {
    * Optional className overidel
    */
   className?: string;
+  /**
+   * Optional icon component
+   */
+  icon?: JSX.Element;
 }
 
 /**
@@ -33,12 +37,13 @@ export const Button: React.FC<ButtonProps> = ({
   size = 'medium',
   backgroundColor,
   className,
+  icon = null,
   label,
   ...props
 }) => {
-  const BASE_BUTTON = 'uppercase tracking-wider box-border';
+  const BASE_BUTTON = 'flex items-center uppercase tracking-wider box-border';
   const PRIMARY_BUTTON = `${BASE_BUTTON} bg-primary-600 border border-primary-600 text-white focus:outline-none focus:bg-primary-900 focus:border-primary-900 hover:bg-primary-900 hover:border-primary-900`;
-  const SECONDARY_BUTTON = `${BASE_BUTTON} border bg-white text-primary-600 border-primary-600 text-black focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900`;
+  const SECONDARY_BUTTON = `${BASE_BUTTON} bg-white border border-primary-600 text-primary-600 focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900`;
 
   const SIZE_BUTTON = {
     small: 'rounded-sm text-sm px-2 py-1',
@@ -53,7 +58,8 @@ export const Button: React.FC<ButtonProps> = ({
       style={{ backgroundColor }}
       {...props}
     >
-      {label}
+      {icon}
+      <p>{label}</p>
     </button>
   );
 };